html - 输入 type=text 填充父容器

Question

我试图让一个<input type="text">（以下称为“文本框”）通过将其设置为width来填充父容器100%。这一直有效，直到我给文本框一个填充。然后将其添加到内容宽度并且输入字段溢出。请注意，在 Firefox 中，这仅在将内容呈现为符合标准时才会发生。在 quirks 模式下，另一个盒子模型似乎适用。

这是在所有现代浏览器中重现该行为的最小代码。

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

我的问题：如何让文本框适合容器？

注意：对于<div id="y">，这很简单：只需设置width: auto。但是，如果我尝试对文本框执行此操作，效果会有所不同，并且文本框将其默认行数作为宽度（即使我display: block为文本框设置了）。

编辑：大卫的解决方案当然会奏效。但是，我不想修改 HTML——我尤其不想添加没有语义功能的虚拟元素。这是我想不惜一切代价避免的典型的葡萄膜炎。这只能是最后的手段。

score 27 · Accepted Answer

使用 CSS3，您可以在输入中使用 box-sizing 属性来标准化它们的盒子模型。像这样的东西将使您能够添加填充并具有 100% 的宽度：

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

不幸的是，这不适用于 IE6/7，但其余的都很好（兼容性列表），所以如果您需要支持这些浏览器，您最好的选择是 Davids 解决方案。

如果您想阅读更多内容，请查看Chris Coyier 的这篇精彩文章。

希望这可以帮助！

score 22 · Accepted Answer

您可以用 a 包围文本框<div>并给出<div> padding: 0 20px. 您的问题是 100% 宽度不包括任何填充或边距值；这些值被添加到 100% 宽度之上，因此溢出。

score 3 · Accepted Answer

由于Box-Modell的定义和实现方式，我认为没有针对此问题的纯 CSS 解决方案。（除了Matthew所描述的：也使用百分比作为填充，例如宽度：94%；填充：0 3%；）

但是，您可以构建一些 Javascript 代码来动态计算页面加载时的宽度......嗯，当然每次调整浏览器窗口大小时也必须更新该值。

我做过的一些测试的有趣副产品：Firefox确实将输入字段的宽度设置为 100%，如果另外width: 100%;你也将 max-width 设置为 100%。这在 Opera 9.5 或 IE 7 中不起作用（尚未测试旧版本）。

score 3 · Accepted Answer

如何让文本框适合 2019 年的容器？

只需使用 display: flex;

#x {
  background: salmon;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

score 2 · Accepted Answer

不幸的是，纯 CSS 无法做到这一点。对于任何重要的灵活但受限的 UI 行为，都需要修改 HTML 或 Javascript。CSS3 列在这方面会有所帮助，但在像您这样的场景中却没有。

大卫的解决方案是最干净的。这并不是一个真正的 divitis 的情况——你不会不必要地添加一堆 div，或者给它们像“p”和“h1”这样的类名。它服务于一个特定的目的，在这种情况下的好处是它也是一个可扩展的解决方案——例如，您可以随时添加圆角而无需进一步添加任何东西。可访问性也不受影响，因为它们是空的 div。

Fwiw，这是我实现所有文本框的方式：

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

然后，您可以自由地使用 CSS 添加圆角、添加填充（如在您的情况下）等，但您也不必这样做——您可以完全隐藏这些侧 div 并且只有一个常规输入文本框.

其他解决方案是使用表格，例如亚马逊使用表格来获得灵活但受限的布局，或者使用 Javascript 来调整大小并在窗口调整大小时更新它们，例如 Google Docs、Maps 等。所有这些都是这样做的。

无论如何，我的两分钱：在这种情况下，不要让理想主义妨碍实用性。:) David 的解决方案很有效，几乎不会弄乱 HTML（事实上，使用语义类名，如“之前”和“之后”在 imo 中仍然非常干净）。

score 1 · Accepted Answer

这种行为是由盒模型的不同解释引起的。正确的盒子模型声明宽度仅适用于内容，并且填充和边距添加到它。因此，您将获得 100% 加上 20px 左右填充，等于 100%+40px 作为总宽度。原始的 IE 框模型，也称为 quirks 模式，在宽度中包含 padding 和 margin。因此，在这种情况下，您的内容的宽度将是 100% - 40px。这就是为什么您会看到两种不同的行为。据我所知，没有解决方案，但是可以通过将宽度设置为 98% 并将填充设置为每侧 1% 来解决此问题。

score 1 · Accepted Answer

@Domenic 这不起作用。width auto 仅执行该元素的默认行为，因为 width 的初始值为 auto （请参阅第 164 页，级联样式表第 2 级修订版 1 规范）。分配块类型的显示也不起作用，这只是告诉浏览器在显示元素时使用块框，并且不会像 div 那样分配尽可能多的空间的默认行为（参见第 121 页，级联样式表 2 级修订 1 规范）。该行为由可视用户代理处理，而不是 CSS 或 HTML 定义。

score 0 · Accepted Answer

0

我相信你可以用负边距来应对溢出。IE

margin: -1em;

于 2008-09-09T18:45:56.003 回答

score 0 · Accepted Answer

默认填充和边框将阻止您的文本框真正达到 100%，因此首先您必须将它们设置为 0：

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7 
}

然后，将您的边框和任何您想要的填充或边距放在文本框周围的 div 中：

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>

这应该允许您的文本框可扩展，并且无需 javascript 即可获得您想要的确切大小。

score 0 · Accepted Answer

要使输入填充父级的宽度，需要设置 3 个属性：宽度：100%，边距左：0，边距右：0。

我只是猜想零边距设置会有所帮助，并且我已经尝试过了，但是我不知道为什么边距（左右；当然顶部和底部边距在这里不受影响）应该为零才能使其起作用。:-)

input {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

注意：您可能需要将 box-sizing 设置为 border-box 以确保填充不会影响结果。

score 0 · Accepted Answer

我用纯 CSS 表来解决这个问题。一个有点长的例子，但对于所有想要为数据库的大量字段制作条目屏幕的人来说很重要......

// 生长激素

// NO JAVA !!! ;-)

html {
  height: 100%;
}

body {
  position: fixed;
  margin: 0px;
  padding: 0px;
  border: 2px solid #FF0000;
  width: calc(100% - 4px);
  /* Demonstrate how form can fill body */
  min-height: calc(100% - 120px);
  margin-top: 60px;
  margin-bottom: 60px;
}


/* Example how to make a data entry form */

.rx-form {
  display: table;
  table-layout: fixed;
  border: 1px solid #0000FF;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.rx-caption {
  display: table-caption;
  border: 1px solid #000000;
  text-align: center;
  padding: 10px;
  margin: 10px;
  width: calc(100% - 40px);
  font-size: 2.5em;
}

.rx-row {
  display: table-row;
  /* To make frame on rows. Rows have no border... ? */
  box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);
}

.rx-cell {
  display: table-cell;
  margin: 0px;
  padding: 4px;
  border: 1px solid #FF0000;
}

.rx-cell label {
  float: left;
  border: 1px solid #00FF00;
  width: 110px;
  padding: 4px;
  font-size: 1em;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rx-cell label:after {
  content: " :";
}

.rx-cell input[type='text'] {
  float: right;
  border: 1px solid #FF00FF;
  padding: 4px;
  background-color: #eee;
  border-radius: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  /* Fill the cell - but subtract the label width - and litte more... */
  width: calc(100% - 130px);
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[type='submit'] {
  font-size: 1.3em;
}

<html>
<meta charset="UTF-8">

<body>

  <!--                                                                                                                                                                                                                                                                             
        G Hasse, gorhas at raditex dot nu                                                                                                                                                                                                                                            
        This example have a lot of frames so we                                                                                                                                                                                                                                      
        can experiment with padding and margins.                                                                                                                                                                                                                                     
    -->

  <form>

    <div class='rx-form'>


      <div class='rx-caption'>
        Caption
      </div>


      <!-- First row of entry -->

      <div class='rx-row'>

        <div class='rx-cell'>
          <label for="input11">Label 1-1</label>
          <input type="text" name="input11" id="input11" value="Some latin text here. And if it is very long it will get ellipsis" />
        </div>

        <div class='rx-cell'>
          <label for="input12">Label 1-2</label>
          <input type="text" name="input12" id="input12" value="The content of input 2" />
        </div>

        <div class='rx-cell'>
          <label for="input13">Label 1-3</label>
          <input type="text" name="input13" id="input13" value="Content 3" />
        </div>

        <div class='rx-cell'>
          <label for="input14">Label 1-4</label>
          <input type="text" name="input14" id="input14" value="Content 4" />
        </div>

      </div>

      <!-- Next row of entry -->

      <div class='rx-row'>

        <div class='rx-cell'>
          <label for="input21">Label 2-1</label>
          <input type="text" name="input21" id="input21" value="Content 2-1">
        </div>

        <div class='rx-cell'>
          <label for="input22">Label 2-2</label>
          <input type="text" name="input22" id="input22" value="Content 2-2">
        </div>

        <div class='rx-cell'>
          <label for="input23">Label 2-3</label>
          <input type="text" name="input23" id="input23" value="Content 2-3">
        </div>

      </div>


      <!-- Next row of entry -->

      <div class='rx-row'>

        <div class='rx-cell'>
          <label for="input21">Label 2-1</label>
          <input type="text" name="input21" id="input21" value="Content 2-1">
        </div>

        <div class='rx-cell'>
          <label for="input22">Label 2-2</label>
          <input type="text" name="input22" id="input22" value="Content 2-2">
        </div>

        <div class='rx-cell'>
          <label for="input23">Label 2-3</label>
          <input type="text" name="input23" id="input23" value="Content 2-3">
        </div>

      </div>

      <!-- And some text in cells -->

      <div class='rx-row'>

        <div class='rx-cell'>
          <div>Cell content</div>
        </div>

        <div class='rx-cell'>
          <span>Cell content</span>
        </div>

      </div>



      <!-- And we place the submit buttons in a cell -->

      <div class='rx-row'>

        <div class='rx-cell'>
          <input type="submit" name="submit1" value="submit1" />
          <input type="submit" name="submit2" value="submit2" />
        </div>

      </div>

      <!-- End of form -->
    </div>
  </form>

</body>

</html>

html - 输入 type=text 填充父容器

11 回答 11

Related

Reference