同时左右定位div答案

【问题标题】：positioning a div right and left simultaneously同时左右定位div
【发布时间】：2013-04-05 18:22:07
【问题描述】：

我正在尝试使用绝对定位使 div 具有宽度，它在 google chrome 中工作正常，但在 fierfox 中却没有。为什么会有冲突？我在浏览器和 fierfox 上都尝试了完全相同的代码，但没有重新编译它。

   <!DOCTYPE HTML>
<html >
    <head>
        <meta charset="utf-8"/>
        <title>Kelma</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>

            <input type="text" id="center" />
    </body>
</html>

这是css文件

#center{
    position: absolute;
    left:50px;
    right: 50px;
}

【问题讨论】：

AFAIK输入没有宽度，属于内联元素
这对我来说是正确的；我不确定它为什么会失败。如果它在 Firefox 中不起作用，那么它做错了什么？
@caligula：嗯，我之前肯定在文本输入元素上设置过宽度。您还应该如何设置文本框的宽度？
html <input> element ignores CSS left+right properties?的可能重复

标签： html css positioning

【解决方案1】：

看看这个：

<!DOCTYPE HTML>
<html >
    <head>
        <meta charset="utf-8"/>
        <title>Kelma</title>
        <link rel="stylesheet" href="style.css" />
        <style>
            #wrapper
            {
               position: absolute;
               left:50px;
               right: 50px;
            }
            #center
            {
               width:100%;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
               <input type="text" id="center" value="test" />
        </div>
    </body>
</html>

我用 div 包装输入，并将样式应用于 div，并将 100% 宽度应用于输入。

【讨论】：

我相信由于文本框宽度和位置的处理方式，原始代码在 FF 中不起作用。通过包裹它，您可以强制调整宽度。
谢谢你，现在它正在醒来，但为什么？！我真的很想知道为什么不在 fierfox 上。
根据我的尝试，当您设置左右偏移量（设置为大于零的值）时，即使您强制 width:auto.. 当您尝试对 DIV 甚至内联块元素做同样的事情，然后它就可以工作了......这对我来说很奇怪，但这就是我发现的......

【解决方案2】：

我已经让它与内联 css 一起工作

这是我个人网站上的一个例子

<div style="position:absolute; top:60px; bottom:5%; left:5%; right:5%; width:90%; text-align:center;"> SOME TEXT </div>

我个人喜欢使用百分比，因为它在某些网站上看起来更好。让我知道这是否适合您！现场观看：http://cbogausch.com/portal 它适用于 firefox 和 chrome

【讨论】：

【解决方案3】：

试试这个：

#center{
  position: absolute;
  left:0px;
  width: 100%;
}

【讨论】：

我总是把东西放在两边。是不是文本框特有的东西让它们不想调整大小以适应？
@marcelo 您在示例中显示的内容意味着宽度将为 100% + 50px，这将导致元素超出范围（因此将被裁剪或出现滚动，否则会导致一些我现在不记得的其他问题。
操作，有点粗心。谢谢@trajce

【解决方案4】：

这不是你的意思吗？

body{padding: 0 50px;}
input{width:100%;

【讨论】：

【解决方案5】：

在你的 CSS 上使用它：

#center {
   margin: 0 auto;
   width: 90%;
}

汞，维尼修斯 =)

【讨论】：