Css 使用position:absolute设置输入宽度

一个简单但烦人的问题-我试图通过使用绝对定位（即右：10px；左：10px）设置输入[type=text]宽度，但我无法让它打球

---

有没有人有办法把它变好呢？

据我所知，你想做的事情不能那样做。其中一个值（左或右）应该满足位置的要求，然后您只需设置

宽度

和

高度

，正如Marco所说，您不能这样做。如果您不知道页面的宽度，则必须使用javascript来实现该效果：

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

---

事实上，你做的很好。您只需要记住设置父元素的位置

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

这将导致输入框为390px

如果将div设置为灵活，则输入框也会灵活

编辑：似乎只适用于Chrome，因此您需要将输入放入另一个元素中。这也适用于FF和IE：

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

---

这达到了预期的效果。有点黑客味，也许…

css定位并不是你想要的那样。它所做的只是设置它相对于其父对象的位置。关键是（对于大多数浏览器），您只需要指定左/右和上/下两个选项中的一个

---

您可以将输入的宽度设置为100%，然后将输入的父容器的左填充设置为10px，右填充设置为10px。这应该会给你想要的。

周围的HTML是什么样子的？会发生什么？你在什么浏览器上试用过它？你可以在IE7及以上的大多数标签上同时使用左边和右边-尽管它看起来越来越像你不能在输入上使用。我希望它至少能在没有任何JS的情况下“工作”，但不会有太大的损失。感谢您的帮助（和测试！！）这部分是正确的；Internet Explorer 7（可能也是第8版）不同时接受

左：

和

右：

CSS属性，而其他浏览器对此进行处理。firefox 3.5.5当然也不接受，在快速测试后，设置

左

和

右

都可以在正常元素上工作（例如，

）而且非常有用。令人沮丧的是，这对

元素不起作用。您应该启动IDE并进行测试。设置

position:absolute

以及

left

和

right

实际上会导致元素从左侧和右侧拉伸到指定的长度。将元素包装到另一个元素中实现了巧妙的效果！

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

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