css – 使用position:absolute设置输入宽度

前端之家收集整理的这篇文章主要介绍了css – 使用position:absolute设置输入宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
一个简单但令人讨厌的一个 – 我试图通过使用绝对定位(即右:10px;左:10px)设置一个输入[type = text]宽度,但我不能让它玩球.

有人有解决方案来踢它吗?

解决方法

其实,你在做什么工作正常您只需要记住设置父元素的位置.
  1. <div>
  2. <input type="text">
  3. </div>

然后CSS它:

  1. div {
  2. width: 400px;
  3. position: relative;
  4. }
  5. input {
  6. position: absolute;
  7. left: 5px;
  8. right: 5px;
  9. }

这将导致输入框为390px.

如果将div设置为灵活,那么输入框也将是.

编辑:似乎只能在Chrome中工作,因此您需要将输入放在另一个元素中.这在FF和IE中也是如此:

  1. <div id="parent">
  2. <div><input type="text"></div>
  3. </div>

这个CSS:

  1. #parent {
  2. position: relative;
  3. width: 400px;
  4. }
  5. #parent div {
  6. position: absolute;
  7. left: 5px;
  8. right: 5px;
  9. }
  10. #parent div input {
  11. width: 100%;
  12. }

这具有预期的效果.有点黑客,也许…

猜你在找的CSS相关文章