css - 元素共享 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

input 和 button 元素是行内元素。

只需在它们上添加 display: block 规则，使 width: 100% 规则隐含。

默认情况下， block 级元素将继承其父元素的宽度，并在另一个下方呈现。

对于一个表单，你可以使用这样的代码:

HTML

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

CSS

form input,
form button{
    display: block;
}