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

我有一个标题，里面有一个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>

标题下方是导航栏。我遇到的问题是，与导航栏相比，我的标题内容稍微向右移动了一点，我找不到解决方法。您可以在此处看到HTML和CSS代码：

---

感谢您的帮助或建议。

在页眉中，您需要（按技术偏好的顺序）选择其中一项

• 删除宽度并使其自动调整大小，或
• 将宽度设置为880px，以说明内部或外部的填充为60px
• 卸下衬垫，将宽度保留为940px

---

您的主体也固定为940px，从技术上讲，page_标题的内部只有880px可使用，因此，940px将其推到其限制之外，或者在本例中，推到div的右侧。

将

框大小：边框框

添加到.page_标题类中

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

---

你的页眉有空白和边距。这会影响宽度。搜索

CSS框模型

@JoshC？？？小提琴演奏得很好given@JoshC我看错了。你为什么不发布一个答案呢？那些处理盒子模型不同的浏览器呢？标题不是太薄了吗？在这种情况下，主要的问题似乎是包含导航栏上方的内容。自动调整大小可能是最好的。第二个最好的办法是固定宽度来填充。最后，由于OP没有指定填充是可选的，因此删除填充并保持原始宽度。我喜欢选择；你喜欢选项吗？我要编辑这篇文章。我的意思是在一个浏览器中固定宽度+填充！=所有浏览器中的固定宽度+填充。OP未指定“全宽”是可选的，具体取决于浏览器的长方体模型计算。好建议。这可能是最干净的了。非常感谢。我不知道“盒子大小”选项，还在学习。谢谢大家的帮助和建议。（只是为了改进答案。）如果左右两侧的“填充”和“边距”都设置为零，则不需要“框大小”：

padding:30px 0；利润率：10px0

@Wlad，这（显然）是正确的，但是你不会得到左右填充。从您的原始代码来看，似乎您确实希望用户和搜索元素得到左/右填充。@DanielD-是的。我昨天深夜在做这些设置，我可能已经想到了，让用户和搜索元素左右填充。再次感谢您的明确解释。

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