Question

我遇到了一些代码上的问题：

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到右侧，导致我需要水平滚动条。我试过将header div放在具有相对定位的容器div中，但填充使header div仅在容器上溢出15px，仍使我留下侧边栏。是否有人能帮我更好地理解它？谢谢。

Answer 1

尝试移除头部的100%宽度。由于div是行元素，所以不需要。

Answer 2

请尝试使用以下div头部。

div#header { width: 100%; height:15px; background-color: #252525; padding: 10px 0px 10px; position: relative; }

Answer 3

我不是很确定你想要达成什么目标，但这是一个开场：

块元素（例如div）始终扩展到容器的宽度，除非您在IE中使用怪癖模式。

在同一个元素上使用absolute定位和向右浮动是没有意义的。使用margin获取适当的距离。浮动元素确实需要一些尺寸，例如宽度。没有必要在同一个元素上同时用绝对定位和右浮动。使用margin可以得到想要的间距。浮动元素也需要一些属性，例如宽度。

如果你想将浮动元素置于顶部，它需要在父元素中首先指定。也就是说，将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; 
}

Answer 4

在正确尺寸的容器div上使用overflow:hidden会起作用吗？

友情链接