Html 输入框不是全宽

<div class="flex flex-col md:flex-row md:items-center md:justify-between">
  <div class="flex flex-row items-center">
    <div class="icon">ICON</div>
    <div class="brand">BRAND</div>
  </div>
  <div class="flex grow">
    <span class="relative flex w-full items-center bg-green-200 p-4">
      <label for="search"></label>
      <div class="icon absolute">ICON</div>
      <input placeholder="WHY NOT FULL WIDTH FOR THIS INPUT BOX?????" class=""
    /></span>
  </div>
  <div class="flex flex-row">SECTION-2</div>
</div>

<!-- Flex Container -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
    <!-- Flex Item List -->
  
    <!-- 1. -->
    <div class="icon">ICON</div>
  
    <!-- 2. -->
    <div class="brand">BRAND</div>
  
    <!-- 3. - fill empty places by "grow" -->
    <!-- Need one-line so we added flex class -> (Sub) Flex Container -->
    <span class="grow bg-green-200 p-4 flex">
        <!-- (Sub) Flex Item List -->

        <!-- 1. -->
        <label for="search"></label>

        <!-- 2. -->
        <div class="icon">ICON</div>

        <!-- 3. -->
        <!-- fill empty places by "grow" -->
        <input placeholder="WHY NOT FULL WIDTH FOR THIS INPUT BOX?????" class="grow" />
    </span>

    <!-- 4. -->
    <div>
      SECTION-2 --> Maybe right Section
    </div>
  </div>
</div>

Html相关问答推荐

删除第一个列表项上的左边框

如何使用bslb设置可导航页面侧边栏的样式

为什么这个高度为100%的页面会出现滚动条？

如何让QML`Text`元素内的链接在悬停时显示鼠标指针？

如何从卷轴中排除粘性元素？

在FlexBox中将div拉伸到父div的完全高度

assets资源 净值元素不会扩展到涵盖子项

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

元素在向x提供溢出时被隐藏

如何在CSS中延迟触发2个转换？

为什么当我按第三个按钮时，前两个按钮会跳动？

伪元素：after和溢出隐藏

使单行路径的 svg 填充父级的 100% 宽度

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

从 Vue 应用程序的容器元素渲染 HTML

HTML 如何根据屏幕尺寸调整/裁剪视频背景？

鼠标悬停时切换 colored颜色 的双色链接

浮动元素忽略 margin-top 属性后的块元素

沿文本对齐双引号

如何在不删除

标记的情况下加入 HTML 中的段落