html <input> 元素忽略 CSS left+right 属性？答案

【问题标题】：html <input> element ignores CSS left+right properties?html <input> 元素忽略 CSS left+right 属性？
【发布时间】：2010-10-01 19:23:39
【问题描述】：

我注意到 HTML 中的 <input> 元素忽略了 CSS 对“left”和“right”属性。对“顶部”和“底部”也是如此。请看下面的示例代码：

<html>
    <head>
        <style><!--
        #someid {
            position: absolute;
            left: 10px;
            right: 10px;
            top: 10px;
            bottom: 10px;
        }
        --></style>
    </head>
    <body>
        <input type="text" id="someid" value="something"/>
    </body>
</html>

<input> 应该占据浏览器中的几乎所有空间（除了围绕它的 10 像素边框）。它在 Safari 中运行良好，但在 FireFox 和 IE 中，<input> 在浏览器的左上角仍然很小。

如果我使用“left”和“width”、“top”和“height”，那么一切正常。但是我不知道宽度和高度是多少，我希望它们根据浏览器窗口的大小进行调整。

任何想法如何解决这个问题？

谢谢。

【问题讨论】：

注意input type='text'不管多大，只会给你一行textinput。请改用。
我的建议是 -1 :)
+1 我也遇到了同样的问题！
查看stackoverflow.com/a/16288462/340290 以在没有包装元素的情况下根据绝对布局中的左右值扩展input 元素。（请参阅我的评论 stackoverflow.com/questions/16284087/… 了解包装器的其他问题）

标签： html css input positioning

【解决方案1】：

它没有忽略左或上，你会看到它确实定位了 10px。正在发生的事情是权利和底部没有得到尊重。表单元素在布局引擎中被特殊对待，FF/IE 完全有可能认为输入的宽度/最大长度更重要，我还没有真正研究过为什么会这样。

不过，这有点奇怪。也许你最好看看<textarea>，它旨在提供大文本输入，你可以通过应用width: 100%; height: 100%; 将其推到100% 尺寸，并注意容器div 上的10px 边距。

WFM：

<html>
<head>
    <style>
    body
    {
        margin: 0px;
    }
    div
    {
        position: absolute; margin: 2%; width: 96%; height: 96%;
    }
    textarea
    {
        position: absolute; width: 100%; height: 100%; 
    }
    </style>
</head>
<body>
    <div>
        <textarea></textarea>
    </div>
</body>

【讨论】：

其实 textarea 也有同样的行为。我需要一个非常复杂的布局中的输入和文本区域。我已将问题简化为这个简单的场景；如果我能做到这一点，那么更复杂的布局也应该可以工作。
我认为您最好发布更完整的 html/css，但请参阅我的编辑。
我明白了。我用输入尝试了你的想法，它也有效。基本上，如果我在输入周围放置虚拟 div，我可以将输入设置为 100% 的宽度和高度，然后我只需定位 div。谢谢。
width: 100% 和 height: 100% 也应该添加到 body 和 html 元素中。

【解决方案2】：

您可以使用包装器 DIV

        <html> 
            <head> 
                    <style><!-- 
                #wrapper { 
                    position: absolute; 
                    left: 10px; 
                    right: 10px; 
                    top: 10px; 
                    bottom: 10px; 
                } 
                #someid { 
                  /*  position:relative;  EDIT: see comments*/
                    height:100%; 
                    width:100% 
                }
    --></style>
                </head>
            <body>
              <div id="wrapper">
              <input type="text" id="someid" value="something"/>
              </div>
           </body>
       </html>

【讨论】：

另外， position:relative 在输入上是否真的必要？我不认为位置是继承的。
@SpoonMeiser。谢谢。（英语不是我的娘娘腔）。你在哪里也正确的位置。
谢谢！大帮助！我也遇到过同样的问题。

【解决方案3】：

http://reference.sitepoint.com/css/bottom 比如说，关于 Internet Explorer (

不支持同时使用 top、right、bottom 和 left 来指定绝对定位元素的位置和尺寸；他们将使用最后指定的垂直和水平位置，并且需要使用宽度和高度指定尺寸

【讨论】：

【解决方案4】：

它在 Safari 中的显示方式并非应有的显示方式。因为您没有指定高度值，input 将默认为最后继承的字体大小。

右侧和底部位置也将被忽略，因为您试图同时设置顶部和左侧边距。看起来他们在这种情况下优先。

如果您需要使用input 字段并让它显示在浏览器窗口的整个宽度和高度内，您需要像这样重做CSS：

body{
    margin:10px;
}

#someid{
    display:block;
    margin:0 auto;
    width:100%;
    height:100%;
}

这会将input 字段拉伸到用户浏览器窗口的高度和宽度。它还将在距离浏览器窗口的每边 10 像素处留有边距。

如果您必须有一个边距，则将其设置为 body 样式或围绕输入字段的包装器 DIV。

【讨论】：