CSS，将 HTML 标题内容与导航栏对齐答案

【问题标题】：CSS, aligning HTML header content with navigation barCSS，将 HTML 标题内容与导航栏对齐
【发布时间】：2013-12-04 09:00:58
【问题描述】：

我有一个标题，里面有一个 div 和两个 span：

<header class="page_header">

            <div id="title">Some title</div>    
            <span id="user">User: <i>${username }</i></span>
            <span id="search"/><input type="text"><input type="submit" value="Search"/></span>

标题内容的 CSS 样式是：

.page_header {
    padding: 30px;
    margin: 10px;
    width: 940px;
}
.page_header #user {
    float: left;
    margin: 0;
}
.page_header #title {
    text-align: center;
    font-size: 24px;
}
.page_header #search {
    float: right;
    text-align: right;
}

标题下方是导航栏。我遇到的问题是，与导航栏相比，我的标题内容向右侧移动了一点，我找不到解决此问题的方法。您可以在此处查看 HTML 和 CSS 代码：http://jsfiddle.net/vvozar/QU542/1/

感谢任何帮助或建议。

【问题讨论】：

您的标题有填充和边距。这会影响宽度。搜索CSS box model
@JoshC ???小提琴被给了
@JoshC 我看错了。你为什么不发布作为答案？

标签： css html

【解决方案1】：

将box-sizing: border-box 添加到您的 .page_header 类中。

FIDDLE

.page_header {
    padding: 30px;
    margin: 10px 0;
    width: 940px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

【讨论】：

或者这个。好建议。这可能是最干净的。
非常感谢。我不知道'box-sizing'选项，还在学习。谢谢大家的帮助和建议。
（只是为了改进答案）如果'padding'和'margin'左右两边都设置为零，则不需要'box-sizing'：padding: 30px 0; margin:10px 0;
@Wlad，这（显然）是正确的，但是你不会得到左右填充。从您的原始代码看来，您确实希望用户和搜索元素获得左/右填充。
@DanielD - 是的。我昨天深夜做了这些设置，我可能已经想到了，让用户和搜索元素左右填充。再次感谢您的明确解释。

【解决方案2】：

在 page_header 中，您需要（按照技术偏好的顺序）

删除宽度并让它自动调整大小，或者
将宽度设置为 880px 以解决内部周围 60px 的填充或
移除内边距并将宽度保留为 940 像素。

你的 body 也固定为 940px，从技术上讲，page_header 内部只有 880px 可以使用，因此，940px 将它推到了它的限制之外，或者在这种情况下，推到了 div 的右侧。

【讨论】：

浏览器对盒子模型的处理方式不同呢？表头不会太细吗？
在这种情况下，似乎主要关注的是包含导航栏上方的内容。自动调整大小可能是最好的。考虑填充的固定宽度将是第二好的。最后，由于 OP 没有指定填充是可选的，因此删除填充并保持原始宽度。我喜欢选项；你喜欢选项吗？我要编辑帖子。
我的意思是一个浏览器中的固定宽度+填充！=所有浏览器中的固定宽度+填充。 OP 没有指定全宽是可选的，具体取决于浏览器的盒子模型计算。