使用 position:absolute 设置输入宽度答案

【问题标题】：using position:absolute to set an inputs width使用 position:absolute 设置输入宽度
【发布时间】：2009-11-10 15:08:54
【问题描述】：

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

有没有人有办法让它成形？

【问题讨论】：

周围的 HTML 是什么样的？发生什么了？您在哪些浏览器中尝试过？
您可以在 IE 7 及更高版本中的大多数标签上同时使用左右 - 尽管它看起来越来越像您无法输入。我希望它至少可以在没有任何 JS 的情况下“工作”，但不会有太大的损失。感谢您的帮助（和测试！！）

标签： css

【解决方案1】：

实际上，您正在做的事情很好。您只需要记住设置父元素的位置即可。

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

然后CSS它：

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

这将导致输入框为 390 像素。

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

edit: 似乎只适用于 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%;
    }

这具有预期的效果。有点hack-ish，也许......

【讨论】：

将包装到另一个
中做到了——巧妙！

【解决方案2】：

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

【讨论】：

这部分正确； Internet Explorer 7-（可能也是第 8 版）不接受 left: 和 right: CSS 属性，而其他浏览器可以很好地呈现它。
firefox 3.5.5 肯定也不接受，经过快速测试
同时设置left 和right 适用于普通元素（例如<div>）并且非常有用。 jsfiddle.net/kFx4D 令人沮丧的是，这不适用于 <input> 元素。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

css 定位并不完全符合您的要求。它所做的只是设置它相对于它的父级的位置。关键是（对于大多数浏览器）您只能指定左/右之一和顶部/底部之一。

您可以将输入的宽度设置为 100%，然后将输入的父容器的 padding-left 设置为 10px，padding-right 设置为 10px。那应该给你想要的。

【讨论】：

你应该启动你的IDE并测试一下。设置position:absolute 以及left 和right 实际上会导致元素从左侧和右侧拉伸到指定的长度。