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，这使得我有一个水平滚动条。我已经尝试将标题div放在一个容器div中，具有相对定位，但是填充导致标题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中使用怪癖模式。

在同一元素上使用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; 
}

Answer 4

在正确大小的容器div上“溢出：隐藏”吗？

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

4 个答案: