元素共享100％宽度的CSS

Question

我喜欢制作一个包含多个元素的布局，这些元素共享父元素的100％宽度。 找到了解决方案：how-can-multiple-dynamically-sized-divs-share-100-width。 问题是在这里我总是需要一些像div这样的包装元素。想要实现这一点 只有输入，按钮元素等。

<form>
   <button style="width: 20px;"></button>
   <input style="width: 100%;" type="text"/>
</form>

Answer 1

输入和按钮元素是内联元素。

只需在其上添加display: block规则即可隐式width: 100%规则。

块级元素默认会继承父级的宽度，并且会一个在另一个之下呈现。

对于表单，您可以使用以下代码：

HTML

<form>
    <input />
    <button />
</form>

CSS

form input,
form button{
    display: block;
}

Answer 2

如果您始终希望它们的宽度为100%，则可以使用

min-width: 100%;