由于某种原因，“。ep”div仅在“.heading”容器中为1像素太宽，导致标题流向下一行。对于通过php动态生成的内容，我在“#contents”div中放置并具有相同的精确结构/使用与“.heading”div完全相同的CSS，它可以正确显示。我甚至用W3C验证了我的HTML / CSS。是什么给了什么？
有关更强大的示例，请参阅我正在处理的项目here。
下面的代码（对于那些不想点击的人）。
HTML：
<body>
<div class="container">
<div class="container toolbar">
<div class="search"></div>
</div>
<div class="container heading">
<div class="sid"><p>Show ID</p></div>
<div class="network"><p>Network</p></div>
<div class="title"><p>Title</p></div>
<div class="ep"><p>Episode</p></div>
</div>
<div id="contents">
<div id="loading" style="display: none">
<img src="assets/img/loading.gif" alt="loading" />
</div>
</div>
</div>
</body>
CSS：
html, body {
min-height: 100%;
}
body {
font-family: 'Open Sans', helvetica, arial, sans-serif;
}
.container p {
margin: 0;
}
#contents {
margin-top: 8em;
}
#contents #loading {
display: inline-block;
width: 16px;
height: 16px;
position: absolute;
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
}
.toolbar {
position: fixed;
top: 0;
background: #ccc;
color: #000;
margin: 0;
line-height: 5em;
}
.toolbar > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading {
position: fixed;
top: 5em;
font-weight: bold;
background: #00f;
color: #fff;
margin: 0;
}
.heading > div {
display: inline-block;
padding: 0;
margin: 0;
}
.heading p {
padding: 0;
line-height: 3em;
}
.sid {
width: 10%;
}
.network {
width: 25%;
}
.title {
width: 50%;
}
.ep {
width: 15%;
}
答案 0 :(得分：1)
问题是标题儿童div的内联块。 inline-block将元素显示为内联，但保留了块级元素的一些定位功能。这意味着空格被视为内联元素，因此每个div之间的换行符将呈现为空格并抛弃宽度。
摆脱空格或使用浮点而不是内联块。
答案 1 :(得分：0)
尝试删除div之间的空格。
<div class="container heading"><div class="sid"><p>Show ID</p></div><div class="network"><p>Network</p></div><div class="title"><p>Title</p></div><div class="ep"><p>Episode</p></div></div>
或
<div class="container heading"><!--
--><div class="sid"><p>Show ID</p></div><!--
--><div class="network"><p>Network</p></div><!--
--><div class="title"><p>Title</p></div><!--
--><div class="ep"><p>Episode</p></div><!--
--></div>