关于宽度和填充的 div/CSS 问题答案

【问题标题】：div/CSS question regarding width and padding关于宽度和填充的 div/CSS 问题
【发布时间】：2008-12-16 18:35:54
【问题描述】：

我在处理这段代码时遇到了一些问题：

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 标记的左内边距为 15 像素。正因为如此，div 本身拉伸了页面的宽度，再加上额外的 15px 向右，导致我有一个水平滚动条。我尝试将标题 div 放在具有相对定位的容器 div 中，但填充导致标题 div 仅在容器上方溢出 15px，仍然让我留下侧边栏。有人可以帮助我更好地理解吗？谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

尝试删除标题的 100% 宽度。由于 div 是线元素，所以不需要。

【讨论】：

做到了，没想到div会占满整行。谢谢！

【解决方案2】：

用这个试试 div 标头。

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

【讨论】：

【解决方案3】：

我不太确定你想要完成什么：但这是一个开端：

除非您在 IE 中使用 quirks 模式，否则块元素（例如 div）总是扩展到容器的宽度。

在同一个元素上使用绝对位置和向右浮动是没有意义的。使用边距获得适当的距离。浮动元素确实需要一些尺寸，例如宽度。

如果你想让浮动元素处于“顶部”，则需要首先在它的父元素中指定它。意思是，将 div 放在 img 之前。

div#header { 背景颜色：#252525；填充：10px 0px 10px 15px； } div#登录{ 宽度：100px； /* 在这里使用首选大小。 */ 浮动：对；右边距：10px；边距顶部：5px； }

【讨论】：

【解决方案4】：

'overflow:hidden' 在大小合适的容器 div 上会起作用吗？

【讨论】：