我希望以下示例中的两个 span 标记彼此相邻显示，而不是它们一个显示在另一个下方。如果我将类 span.right 的 width 设置为 49%，它们将彼此相邻显示。我无法弄清楚为什么正确的跨度被向下推，就像正确的跨度有一些不可见的 padding/margin 这使得它占用超过 50%。我试图在不使用 html 表的情况下完成这项工作。有什么想法吗？
* {
margin: 0;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
border: none;
}
div.header {
width: 100%;
height: 80px;
vertical-align: top;
}
span.left {
height: 80px;
width: 50%;
display: inline-block;
background-color: pink;
}
span.right {
vertical-align: top;
display: inline-block;
text-align: right;
height: 80px;
width: 50%;
background-color: red;
}<html>
<head>
<title>Test Page</title>
</head>
<body>
<div class='header'>
<span class='left'>Left Span 50% width</span>
<span class='right'>Right Span 50% width</span>
</div>
</body>
</html>感谢您的解释。 float:left 与 FF 3.1 中的预期结果完美配合。不幸的是，在 IE6 中，右侧跨度呈现 50% 的 50%，实际上它的宽度为浏览器窗口的 25%。将其宽度设置为 100% 可以达到预期的效果，但在处于标准合规模式的 FF 3.1 中会中断，我理解这一点。让它在 FF 和 IE 6 中工作，而不诉诸 hack 或使用多个 CSS 表一直是一个挑战
最佳答案
float: left;
尝试将其添加到 span.left
它会导致它向左浮动(如语法所建议的那样)。
无论如何我都不是 CSS 专家，所以请不要将此视为无可争辩的事实，但我发现当某些东西 float 时，它不会影响其下方的垂直位置。
如果您将 span.right float 到右侧，然后在它们下面添加文本，您应该会得到一些有趣的结果，要停止这些“有趣的结果”，您可以使用“clear: left/right/both”，这将导致 block 任何 float 到左/右/两者的东西下面的清晰样式。 W3Schools也有此属性的页面。
欢迎来到 Stackoverflow。
关于html - 跨度内联 block ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34581/