23

我注意到<input>HTML 中的元素忽略了 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>几乎所有空间（除了它周围的 10px 边框）。它在 Safari 中运行良好，但在 FireFox 和 IE 中，它<input>在浏览器的左上角仍然很小。

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

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

谢谢。

4

4 回答 4

17

您可以使用包装器 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>
于 2009-01-16T13:24:18.723 回答
5

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

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

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>

于 2009-01-16T13:02:44.307 回答
1

http://reference.sitepoint.com/css/bottom 说，关于 Internet Explorer (<= 6)

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

于 2009-01-16T13:27:20.853 回答
0

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

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

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

body{
    margin:10px;
}

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

这会将input字段拉伸到用户浏览器窗口的高度和宽度。它也将在浏览器窗口的每一侧有 10 个像素的边距。

如果你必须有一个边距，那么body在输入字段周围的样式或包装器 DIV 中设置它。

于 2009-07-25T07:51:26.747 回答