使用position:absolute设置输入宽度

Question

一个简单但恼人的问题--我正在尝试使用绝对定位来设置inputtype=text宽度(即右:10px；左:10px)，但我不能让它玩球。

有没有人有办法让它重整旗鼓？

Answer 1

实际上，您所做的一切都很好。您只需要记住设置父元素的位置即可。

<div>
   <input type="text">
</div>

然后对其进行CSS：

div {
    width: 400px;
    position: relative;
}
input {
    position: absolute;
    left: 5px;
    right: 5px;
}

这将导致输入框为390px。

如果你设置div是灵活的，那么输入框也是灵活的。

编辑：似乎只在Chrome中有效，所以你需要将输入放在另一个元素中。这在FF和IE中也有效：

<div id="parent">
    <div><input type="text"></div>
</div>

使用此CSS：

#parent {
    position: relative;
    width: 400px;
}
  #parent div {
      position: absolute;
      left: 5px;
      right: 5px;
  }
    #parent div input {
        width: 100%;
    }

这具有预期的效果。有点像黑客，也许...

Answer 2

据我所知，你想做的事不能那样做。其中一个值(左或右)应该足以满足位置，然后您只需设置width和height。

Answer 3

正如Marco所说，你根本不能那样做。如果你不知道页面的宽度，你必须使用javascript来达到这个效果：

$('#myInput').css({ right: 10, position: 'absolute', width: $(document).width() - 20 })