Question

这是我今天早些时候的问题的简化版本，因为我没有得到满意的答复。

我有一个HTML和CSS代码，就像这个小提琴：http://jsfiddle.net/wNGHz/

如何在调整其父框架大小时自动调整<input>的大小？

注意：

我更喜欢只使用CSS而不是JavaScript。
<input>与父母的左右边缘距离应为100px。

Answer 1

@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/

Answer 2

我所知道的唯一纯CSS方法是在%中添加宽度：http://jsfiddle.net/PeeHaa/wNGHz/1/

Answer 3

你可以做得更好。

<div class="inputContainer">
<input type="text" value="test" />
</div>


input {
width: 100%;
margin:0 100px;
}

如何扩展此<input />标记？

3 个答案: