Question

分配一些HTML元素（如表单输入）100％宽度时 - 您不能再应用任何可能影响宽度的其他样式。 border或padding之类的内容会导致元素超过100％。这导致可能在其父元素之外的笨拙元素。

由于CSS不支持width: 100% - 2px;我唯一知道的方法是使用绝对像素宽度（width: 98px）或将元素切掉100％，这实际上不是一个选项。

<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>

他们是否还有其他方法？

Answer 1

与adding another div一起，解决方案很快就会使用CSS 3将box-sizing attribute添加到CSS规则中。这个新的CSS 3值已经在IE 8和所有其他浏览器中运行了 - 所以如果你不介意跳过IE 6＆amp; 7你现在可以使用它！

textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

Answer 2

您可以创建一个100％没有镶边（边框，填充）的容器，然后在其中放置一个块元素，使用您想要的任何颜色 - 块元素将默认填充总宽度。

<style>
.container {width:100%;border:0:margin:0;}
.thingy {border:1px solid black;margin:2px;background:#ddd;}
</style>

<div class="container">
  <div class="thingy">
    Both worlds?
  </div>
</div>

Answer 3

这是一个老问题，但值得一提的是，自CSS3起，您可以使用calc：

width: calc(100% - 2px);

100％宽度的HTML元素问题

3 个答案: