锚固诀窍是不能在Firefox

此代码有不同的结果在Firefox和Chrome锚固诀窍是不能在Firefox

<div style="border:1px solid red; width:50%; height:50px; position:relative;"> 
    <input type="text" style="position:absolute; left:0; right:20px;" /> 
</div>

alt text

如何使文本框固定0像素向左和20像素到右侧工作div？

注意：div的宽度必须为50％。

谢谢:)

来源

2010-09-17 Jeaf Gilbert

输入字段是否需要适合容器，或者只需从右边20px处锚定？ – Kevin 2010-09-17 08:35:32

<div style="border:1px solid red; width:50%; height:50px; position:relative;"> 
    <div style="position:absolute; left:0; right:20px;"> 
     <input type="text" style="width: 100%" /> 
    </div> 
</div>

<input>行为恶劣在一些浏览器，把它包在一个div

来源

2010-09-17 07:53:01 Knio

你用这个多余的div来做什么？！在我开枪之前把它删除。 – 2010-09-17 07:56:24

^他说了什么。 – 2010-09-17 08:01:26

''在FF中同时具有'left：'和'right：'设置的常规块元素的行为不同，但它理解'width：100％'。如果你有更好的解决方案，让我们看看:) – Knio 2010-09-17 08:15:23

摆脱left:0;

<div style="border:1px solid red; width:50%; height:50px; position:relative;"> 
    <input type="text" style="position:absolute; right:20px;" /> 
</div>

来源

2010-09-17 07:51:09 Kevin

即时通讯对不起，我希望它向左侧移动0px以及 – 2010-09-17 08:33:58

“如何使文本框固定20像素到div的右边？”要么我没有明白你的意思，要么这个例子工作得很好。

http://jsfiddle.net/GmMCQ/

来源

2010-09-17 07:51:51

您使用了哪种浏览器？它不适用于Firefox。 – 2010-09-17 08:52:58

如何使用盒大小的外<div>？这样，您就能够避免增加额外的一个：

<div style="border:1px solid red; width:50%; height:50px; position:relative; padding-right:20px; box-sizing:border-box;"> 
    <input type="text" style="width:100%;" /> 
</div>

当然，如果你不介意加填充到外<div>这将只适用于...

测试在FF 4.0 &铬10.0

来源

2011-04-04 17:07:56

锚固诀窍是不能在Firefox

回答

相关问题