这是我今天早些时候的问题的简化版本，因为我没有得到满意的答复。
我有一个HTML和CSS代码，就像这个小提琴：http://jsfiddle.net/wNGHz/
如何在调整其父框架大小时自动调整<input>的大小？
注意：
<input>与父母的左右边缘距离应为100px。答案 0 :(得分：2)
@thirtydot在语义上我希望有一个更简单的HTML。我可以包装
<input><div>input但是为此添加一个元素真的很奇怪 造型另一个的唯一目的。我想知道是否有人有 更好的解决方案。
不幸的是，没有更好的方法。这与div是replaced element的事实有关，这意味着它与非替换元素（如position: absolute; left: 0; right: 0）的行为不同。
一个区别是，input在div上的工作方式与在input上的工作方式不同（WebKit除外）。
最佳解决方法是将div包裹在<div class="inputContainer">
<input type="text" value="test" />
</div>
.inputContainer {
position: absolute;
left: 50px;
right: 50px;
}
input {
width: 100%;
background-color: red;
color: white;
border: none;
}
：
http://jsfiddle.net/thirtydot/wNGHz/6/
input { width: 100%; }如果您有box-sizing: border-box，通常最好还要添加padding，以便border内的任何input和width: 100%计算在内{{1}}：http://jsfiddle.net/thirtydot/wNGHz/7/
答案 1 :(得分：0)
我所知道的唯一纯CSS方法是在%中添加宽度：http://jsfiddle.net/PeeHaa/wNGHz/1/
答案 2 :(得分：0)
你可以做得更好。
<div class="inputContainer">
<input type="text" value="test" />
</div>
input {
width: 100%;
margin:0 100px;
}