输入框不是全宽。

huangapple
go评论95阅读模式
英文:

Input box is not full width

问题

我无法理解为什么我的输入框不能占满整个宽度。

我使用Tailwind CSS。

  1. <div class="flex flex-col md:flex-row md:items-center md:justify-between">
  2.   <div class="flex flex-row items-center">
  3.     <div class="icon">ICON</div>
  4.     <div class="brand">BRAND</div>
  5.   </div>
  6.   <div class="flex grow">
  7.     <span class="relative flex w-full items-center bg-green-200 p-4">
  8.       <label for="search"></label>
  9.       <div class="icon absolute">ICON</div>
  10.       <input placeholder="WHY NOT FULL WIDTH FOR THIS INPUT BOX?????" class="">
  11.     </span>
  12.   </div>
  13.   <div class="flex flex-row">SECTION-2</div>
  14. </div>
英文:

I cannot understand why my input box does not take full width.

I use tailwind css.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;div class=&quot;flex flex-col md:flex-row md:items-center md:justify-between&quot;&gt;
  2.   &lt;div class=&quot;flex flex-row items-center&quot;&gt;
  3.     &lt;div class=&quot;icon&quot;&gt;ICON&lt;/div&gt;
  4.     &lt;div class=&quot;brand&quot;&gt;BRAND&lt;/div&gt;
  5.   &lt;/div&gt;
  6.   &lt;div class=&quot;flex grow&quot;&gt;
  7.     &lt;span class=&quot;relative flex w-full items-center bg-green-200 p-4&quot;&gt;
  8.       &lt;label for=&quot;search&quot;&gt;&lt;/label&gt;
  9.       &lt;div class=&quot;icon absolute&quot;&gt;ICON&lt;/div&gt;
  10.       &lt;input placeholder=&quot;WHY NOT FULL WIDTH FOR THIS INPUT BOX?????&quot; class=&quot;&quot;
  11.     /&gt;&lt;/span&gt;
  12.   &lt;/div&gt;
  13.   &lt;div class=&quot;flex flex-row&quot;&gt;SECTION-2&lt;/div&gt;
  14. &lt;/div&gt;

<!-- end snippet -->

If I replace the input element with a div for example then it is all correct, that div takes full width. But for some reason the input element does not. Why?

答案1

得分: 2

翻译结果：

  1. &lt;!-- Flex 容器 --&gt;
  2. &lt;div class=&quot;flex flex-col md:flex-row md:items-center md:justify-between&quot;&gt;
  3.     &lt;!-- Flex 项列表 --&gt;
  4.   
  5.     &lt;!-- 1. --&gt;
  6.     &lt;div class=&quot;icon&quot;&gt;图标&lt;/div&gt;
  7.   
  8.     &lt;!-- 2. --&gt;
  9.     &lt;div class=&quot;brand&quot;&gt;品牌&lt;/div&gt;
  10.   
  11.     &lt;!-- 3. - 使用 &quot;grow&quot; 填充空位 --&gt;
  12.     &lt;!-- 需要单行，因此我们添加了 flex 类 -&gt; (子) Flex 容器 --&gt;
  13.     &lt;span class=&quot;grow bg-green-200 p-4 flex&quot;&gt;
  14.         &lt;!-- (子) Flex 项列表 --&gt;
  16.         &lt;!-- 1. --&gt;
  17.         &lt;label for=&quot;search&quot;&gt;&lt;/label&gt;
  19.         &lt;!-- 2. --&gt;
  20.         &lt;div class=&quot;icon&quot;&gt;图标&lt;/div&gt;
  22.         &lt;!-- 3. --&gt;
  23.         &lt;!-- 使用 &quot;grow&quot; 填充空位 --&gt;
  24.         &lt;input placeholder=&quot;为什么不是输入框的完整宽度？？？？？&quot; class=&quot;grow&quot; /&gt;
  25.     &lt;/span&gt;
  27.     &lt;!-- 4. --&gt;
  28.     &lt;div&gt;
  29.       第二部分 --&gt; 可能是正确的部分
  30.     &lt;/div&gt;
  31.   &lt;/div&gt;
  32. &lt;/div&gt;
英文:

Photo from Solution (original --> successfully)

输入框不是全宽。
Link to Example

More information: How to use "grow" in item of "flex"

Code

  1. &lt;!-- Flex Container --&gt;
  2. &lt;div class=&quot;flex flex-col md:flex-row md:items-center md:justify-between&quot;&gt;
  3.     &lt;!-- Flex Item List --&gt;
  4.   
  5.     &lt;!-- 1. --&gt;
  6.     &lt;div class=&quot;icon&quot;&gt;ICON&lt;/div&gt;
  7.   
  8.     &lt;!-- 2. --&gt;
  9.     &lt;div class=&quot;brand&quot;&gt;BRAND&lt;/div&gt;
  10.   
  11.     &lt;!-- 3. - fill empty places by &quot;grow&quot; --&gt;
  12.     &lt;!-- Need one-line so we added flex class -&gt; (Sub) Flex Container --&gt;
  13.     &lt;span class=&quot;grow bg-green-200 p-4 flex&quot;&gt;
  14.         &lt;!-- (Sub) Flex Item List --&gt;
  16.         &lt;!-- 1. --&gt;
  17.         &lt;label for=&quot;search&quot;&gt;&lt;/label&gt;
  19.         &lt;!-- 2. --&gt;
  20.         &lt;div class=&quot;icon&quot;&gt;ICON&lt;/div&gt;
  22.         &lt;!-- 3. --&gt;
  23.         &lt;!-- fill empty places by &quot;grow&quot; --&gt;
  24.         &lt;input placeholder=&quot;WHY NOT FULL WIDTH FOR THIS INPUT BOX?????&quot; class=&quot;grow&quot; /&gt;
  25.     &lt;/span&gt;
  27.     &lt;!-- 4. --&gt;
  28.     &lt;div&gt;
  29.       SECTION-2 --&gt; Maybe right Section
  30.     &lt;/div&gt;
  31.   &lt;/div&gt;
  32. &lt;/div&gt;

答案2

得分: 1

为使输入框宽度全屏，请添加class="w-full"，同时检查父级元素是否具有明确指定的宽度，或者定义为块级或内联块级，并且具有w-full类。 元素没有默认宽度，也不是块级元素或内联块级元素。

英文:

For making that input full width add class=&quot;w-full" also check if parent span has explicit width specified or defined as block or inline-block in additon to having w-full class. Spans have no default width also are not block nor inline-block elements.

答案3

得分: 1

根据您提供的代码，似乎输入框包含在一个具有p-4类设置的固定宽度的span元素中，该类代表padding: 1rem。这导致输入框不占据父容器的整个宽度。

要使输入框占满整个宽度，您可以从span元素中移除p-4类，并在输入元素中添加w-full类。这将使输入框拉伸以填充其父容器内的可用空间，其父容器具有flex类并带有“grow”效果，表示它应该扩展以填满任何剩余空间。

以下是应用了这些更改的您的代码的更新版本：

  1. <div class="flex flex-col md:flex-row md:items-center md:justify-between">
  2.   <div class="flex flex-row items-center">
  3.     <div class="icon">ICON</div>
  4.     <div class="brand">BRAND</div>
  5.   </div>
  6.   <div class="flex grow">
  7.     <span class="relative flex w-full items-center bg-green-200">
  8.       <label for="search"></label>
  9.       <div class="icon absolute">ICON</div>
  10.       <input placeholder="为什么这个输入框不是全宽？？？？" class="w-full" />
  11.     </span>
  12.   </div>
  13.   <div class="flex flex-row">SECTION-2</div>
  14. </div>
英文:

Based on the code you provided, it seems that the input box is contained within a span element with a fixed width set by the p-4 class, which stands for padding: 1rem. This is causing the input box to not take the full width of the parent container.

To make the input box take the full width, you can remove the p-4 class from the span element and add the w-full class to the input element. This will make the input box stretch to fill the available space within its parent container, which has a flex class with "grow" utility, indicating that it should grow to fill any remaining space.

Here's an updated version of your code with these changes applied:

  1. &lt;div class=&quot;flex flex-col md:flex-row md:items-center md:justify-between&quot;&gt;
  2.   &lt;div class=&quot;flex flex-row items-center&quot;&gt;
  3.     &lt;div class=&quot;icon&quot;&gt;ICON&lt;/div&gt;
  4.     &lt;div class=&quot;brand&quot;&gt;BRAND&lt;/div&gt;
  5.   &lt;/div&gt;
  6.   &lt;div class=&quot;flex grow&quot;&gt;
  7.     &lt;span class=&quot;relative flex w-full items-center bg-green-200&quot;&gt;
  8.       &lt;label for=&quot;search&quot;&gt;&lt;/label&gt;
  9.       &lt;div class=&quot;icon absolute&quot;&gt;ICON&lt;/div&gt;
  10.       &lt;input placeholder=&quot;WHY NOT FULL WIDTH FOR THIS INPUT BOX?????&quot; class=&quot;w-full&quot; /&gt;
  11.     &lt;/span&gt;
  12.   &lt;/div&gt;
  13.   &lt;div class=&quot;flex flex-row&quot;&gt;SECTION-2&lt;/div&gt;
  14. &lt;/div&gt;

答案4

得分: -1

所有 div 默认为 display: block。将 display: block 添加到输入框，它也将变为全宽。

  1. input {
  2.     display: block;
  3. }

你也可以使用 tailwind 提供的 block 类。

英文:

All divs have display: block by default. Add display: block to the input and it will also become full width.

  1. input {
  2.     display: block;
  3. }

You can also use the block class provided by tailwind

huangapple
  • 本文由 发表于 2023年4月17日 04:24:17
  • 转载请务必保留本文链接：https://go.coder-hub.com/76030147.html
  • css
  • html
  • tailwind-css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定