使用position：absolute设置输入宽度

问题描述

一个简单而烦人的 - 我tryign通过使用绝对定位（即右：10px;左：10px）设置输入[type = text]宽度，但我不能得到它打球。

$

解决方案

实际上，你是什么人？ 做得很好。您只需要记住设置父元素的位置。

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

然后CSS it：

  div {
 width：400px; 
 position：relative; 
} 
输入{
 position：absolute; 
 left：5px; 
 right：5px; 
} 
  

这将导致输入框为390px。

如果你设置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输入{
 width：100％; 
} 
  

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

A simple yet annoying one - I am tryign to set an input[type=text] width by using absolute positioning (ie right:10px;left:10px) yet I cant get it to play ball.

Does anyone have a solution to kick it into shape?

解决方案

Actually, what you're doing works fine. You just need to remember to set the parent element's position as well.

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

Then CSS it:

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

This would result in the input box being 390px.

If you set the div to be flexible, then the input box would be too.

edit: seems to only work in Chrome, so you'd need to put the input inside another element. This works in FF and IE too:

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

with this CSS:

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

This has the expected effect. A bit hack-ish, maybe...

这篇关于使用position：absolute设置输入宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！