1

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

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

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

笔记：

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

3 回答 3

2

@thirtydot 在语义上我想要一个更简单的 HTML。我可以换 行<input>，<div>但是为了给另一个元素添加样式而添加一个元素只是很奇怪。我想知道是否有人有更好的解决方案。

不幸的是，没有更好的方法。input它与被替换元素的事实有关，这意味着它与非替换元素（例如div.

一个区别是它position: absolute; left: 0; right: 0在 an 上的工作方式input与它在div（WebKit 除外）上的工作方式不同。

最好的解决方法是将 包装input在 a 中div：

http://jsfiddle.net/thirtydot/wNGHz/6/

<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;
}

当你有时，input { width: 100%; }通常最好也添加box-sizing: border-box, 以使任何padding和borderoninput被计算在内width: 100%：http: //jsfiddle.net/thirtydot/wNGHz/7/

于 2012-04-08T14:14:55.977 回答
0

您可以以更好的方式做到这一点。

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


input {
width: 100%;
margin:0 100px;
}
于 2012-04-08T14:49:07.943 回答
0

我知道的唯一纯 CSS 方式是在以下位置添加宽度：http %: //jsfiddle.net/PeeHaa/wNGHz/1/

于 2012-04-08T14:01:41.453 回答