Question

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

<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;
}

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

感谢任何帮助或建议。

Answer 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;
}

Answer 2

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

删除宽度并让其自动调整大小，或
将宽度设置为880px，以考虑内部填充的60px或
取下填充物并将宽度保留为940px。

你的身体也固定为940px，技术上page_header的内部只有880px可以使用，所以，940px将它推到极限之外，或者，在这种情况下，超出div的右侧。

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

2 个答案: