我在使用此代码时遇到了一些问题:
CSS:
div#header
{
width: 100%;
background-color: #252525;
padding: 10px 0px 10px 15px;
position: relative;
}
div#login
{
float: right;
position: absolute;
right: 10px;
top: 5px;
}
HTML:
<div id="header">
<img src="./img/logo.jpg" />
<div id="login">
<form id="header-login" action="#">
<input type="text" /> <input type="text" /> <input type="submit" value="LOGIN" />
</form>
</div>
</div>
div id = header标签的左侧填充为15px。因此,div本身会拉伸页面的宽度,再加上向右15px,这使得我有一个水平滚动条。我已经尝试将标题div放在一个容器div中,具有相对定位,但是填充导致标题div在容器上溢出15px,仍然留下侧边栏。有人可以帮助我更好地理解吗?感谢。
答案 0 :(得分:4)
尝试删除标题的100%宽度。由于div是行元素,因此不需要。
答案 1 :(得分:1)
尝试使用div标头。
div#header { width: 100%; height:15px; background-color: #252525; padding: 10px 0px 10px; position: relative; }
答案 2 :(得分:1)
我不确定你要完成什么:但这是一个先发制人:
块元素(例如div)总是扩展到容器的宽度,除非你在IE中使用怪癖模式。
在同一元素上使用position绝对值和float值是没有意义的。使用保证金来获得适当的距离。浮动元素确实需要一些尺寸,例如宽度。
如果要将元素浮动为“顶部”,则需要首先在其父元素中指定它。意思是,把div放在img之前。
div#header { background-color: #252525; padding: 10px 0px 10px 15px; } div#login { width: 100px; /* use preferred size here. */ float: right; margin-right: 10px; margin-top: 5px; }
答案 3 :(得分:0)
在正确大小的容器div上“溢出:隐藏”吗?