Gab*_*iel 22 html css positioning input
我注意到<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>
它<input>应占据浏览器中几乎所有空间(除了它周围10px的边框).它在Safari中运行良好,但在FireFox和IE <input>中,它在浏览器的左上角保持较小.
如果我使用"left"和"width","top"和"height",那么一切正常.但是我不知道宽度和高度是多少,我希望它们根据浏览器窗口的大小进行调整.
任何想法如何解决这个问题？
谢谢.
Lui*_*tti 16
您可以使用包装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>
它不会忽略左侧或顶部，您会看到它确实定位了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>