有关宽度和填充的div / CSS问题

时间:2008-12-16 18:35:55

标签: html css

我在使用此代码时遇到了一些问题:

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,仍然留下侧边栏。有人可以帮助我更好地理解吗?感谢。

4 个答案:

答案 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上“溢出:隐藏”吗?