html <input> 元素忽略 CSS left+right 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/450316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html <input> element ignores CSS left+right properties?
提问by Gabriel
I've noticed that the <input>element in HTML ignores the CSS pair of "left" and "right" properties. Same for the pair "top" and "bottom". See the sample code below:
我注意到<input>HTML中的元素忽略了 CSS 对“左”和“右”属性。“顶部”和“底部”对相同。请参阅下面的示例代码：
<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>
The <input>should take up almost all space in the browser (except a border of 10px around it). It works fine in Safari, but in FireFox and IE the <input>stays small in the top-left corner of the browser.
本<input>应占据浏览器几乎所有空间（除的10px的周围有边框）。它在 Safari 中运行良好，但在 FireFox 和 IE<input>中，它在浏览器的左上角仍然很小。
If I use "left" and "width", and "top" and "height", then everything works fine. However I don't know what is the width and the height, I want them adjusted depending of the size of the browser window.
如果我使用“左”和“宽”，“顶”和“高”，那么一切正常。但是我不知道宽度和高度是多少，我希望它们根据浏览器窗口的大小进行调整。
Any ideas how to work around this?
任何想法如何解决这个问题？
Thanks.
谢谢。
采纳答案by Luis Melgratti
You can Use a Wrapper DIV
您可以使用包装器 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>
回答by annakata
It's not ignoring left or top, you'll see it does position 10px out. What's happening is that the right and the bottom are not being respected. Form elements are treated a little bit specially in layout engines, it's entirely possible FF/IE consider the width/maxlength of the input more important, I haven't really looked into why that might be.
它没有忽略左侧或顶部，您会看到它的位置确实超出了 10 像素。正在发生的事情是右翼和底层没有得到尊重。表单元素在布局引擎中被特殊对待，FF/IE 完全有可能认为输入的宽度/最大长度更重要，我还没有真正研究为什么会这样。
It's a bit of a strange thing to do though. Perhaps what you'd be better off doing is looking at <textarea>which is designed to provide a large text input, which you can push to 100% dimensions by applying width: 100%; height: 100%;and take care of the 10px margin on a container div.
不过这样做有点奇怪。也许您最好做的是查看<textarea>哪个旨在提供大文本输入，您可以通过应用width: 100%; height: 100%;和处理容器 div 上的 10px 边距将其推到 100% 尺寸。
WFM:
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>
回答by Eineki
http://reference.sitepoint.com/css/bottomsay, regarding internet explorer (<= 6)
http://reference.sitepoint.com/css/bottom说，关于 Internet Explorer (<= 6)
don't support the specification of both the position and the dimensions of an absolutely positioned element using top, right, bottom, and left together; they'll use the last vertical and horizontal position specified, and need the dimensions to be specified using width and height
不支持同时使用 top、right、bottom 和 left 来指定绝对定位元素的位置和尺寸；他们将使用指定的最后一个垂直和水平位置，并需要使用宽度和高度指定尺寸
回答by random
The way it looks in Safari is not how it should display. Because you didn't specify a height value, the inputwill default to the size of the last inherited font size.
它在 Safari 中的显示方式并不是它应该显示的方式。因为您没有指定高度值，所以input将默认为最后继承的字体大小的大小。
The right and bottom positioning will also be ignored because you're trying to set the top and left margins at the same time. Looks like they take precedence in this case.
右侧和底部定位也将被忽略，因为您试图同时设置顶部和左侧边距。看起来他们在这种情况下优先。
If you need to use the inputfield and have it display inside the entire width and height of the browser window at the time it is seen, you need to redo the CSS like this:
如果您需要使用该input字段并将其显示在浏览器窗口的整个宽度和高度内，则需要像这样重做 CSS：
body{
margin:10px;
}
#someid{
display:block;
margin:0 auto;
width:100%;
height:100%;
}
This will stretch the inputfield to as high and wide as the user has their browser window. It will also have a margin around each side of 10 pixels from the browser window.
这会将input字段拉伸到与用户浏览器窗口一样高和宽的范围。它还将在距浏览器窗口的每边 10 像素周围留出边距。
If you have to have a margin, then set that in the bodystyle or a wrapper DIV around the input field.
如果您必须有边距，请body在输入字段周围的样式或包装 DIV 中设置它。
