使用position：absolute设置输入宽度

本文介绍了使用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...