我有一系列 div 框，后面跟着一个具有相同类的 textarea 来采用相同的样式，但我注意到 div code> 似乎会自动填充父级的水平宽度，而 textarea 则不会。提供 textarea width:100% 可以解决问题，但是如果我提供共享类 margin-left:80px，则 textarea 超出了父级，而 div 框则没有。
我只是想知道为什么会发生这种行为以及是否可以使用 textarea 复制它。到目前为止，我最干净的解决方案是提供 textarea width:calc(100%-80px) 但更喜欢更“自然”的解决方案。
这是一些示例代码:-
HTML
<body>
<div class="container">
<div class="box">
DIV
</div>
<div class="box">
DIV
</div>
<form>
<textarea class="box">TEXTAREA</textarea>
</form>
</div>
</body>
CSS
.container {
background: #bbb;
padding: 30px;
box-sizing: border-box;
}
.box {
height: 80px;
background: #888;
box-sizing: border-box;
margin: 0 0 50px 80px
}
textarea {
width: calc(100% - 80px); // CLEANISH SOLUTION
}
这是一个 JSFiddle:https://jsfiddle.net/tndm2eqz/1/
最佳答案
它确实应用了给定的 CSS，但是 <form>介于两者之间，所以width未正确继承:https://jsfiddle.net/tndm2eqz/3/
.container {
background: #bbb;
padding: 30px;
box-sizing: border-box;
}
.box {
height: 80px;
background: #888;
box-sizing: border-box;
margin: 0 0 50px 80px;
}
form {
margin: 0 0 50px 80px;
padding: 0;
}
textarea.box {
width: 100%;
display: block;
margin:0;
box-sizing: border-box;
}<body>
<div class="container">
<div class="box">
DIV
</div>
<div class="box">
DIV
</div>
<form>
<textarea class="box">TEXTAREA</textarea>
</form>
</div>
</body>关于html - 为什么 Textarea 宽度和 DIV 宽度表现如此不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36476848/