Span 上的内联块
我希望以下示例中的两个 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 中工作，而不诉诸黑客或使用多个 CSS 表一直是一个挑战
I expected the two span tags in the following sample to display next to each other, instead they display one below the other. If I set the width of the class span.right to 49% they display next to each other. I am not able to figure out why the right span is pushed down like the right span has some invisible padding/margin which makes it take more than 50%. I am trying to get this done without using html tables. Any ideas?
* {
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>Thanks for the explanation. The float:left works beautifully with expected results in FF 3.1. Unfortunately, in IE6 the right side span renders 50% of the 50%, in effect giving it a width of 25% of the browser window. Setting its width to 100% achieves the desired results but breaks in FF 3.1 which is in standards compliance mode and I understand that. Getting it to work both in FF and IE 6, without resorting to hacks or using multiple CSS sheets has been a challenge
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试将其添加到 span.left
它将导致它向左浮动（如语法所建议）。
无论如何，我都不是 CSS 专家，所以请不要将此视为无可争议的事实，但我发现当某些东西浮动时，它对其下方的东西的垂直位置没有影响。
如果将 span.right 向右浮动，然后在其下方添加文本，您应该会得到一些有趣的结果，要停止这些“有趣的结果”，您可以使用“clear: left/right/both”，这将导致具有清晰样式的块位于向左/向右/两者浮动的任何物体下方。 W3Schools 也有关于此属性的页面。
欢迎来到 Stackoverflow。
Try adding that to span.left
It will cause it to float to the left (as suggested by the syntax).
I am not a CSS expert by any means so please don't take this as unarguable fact but I find that when something is floated, it makes no difference to the vertical position of things below it.
If you float the span.right to the right then add text beneath them you should get some interesting results, to stop these "interesting results" you can use "clear: left/right/both" which will cause the block with the clear styling to be under anything floated to the left/right/both. W3Schools have a page on this property too.
And welcome to Stackoverflow.
这是因为 inline 和 inline-block 在元素之间包含空格（在您的情况下是换行符）。 在您的情况下，元素的组合宽度为 50%+50%+whitespace > 100%。
您应该将这两个元素放在 HTML 文档中的同一行（不带空格），
或者使用 HTML 注释，
我本人更喜欢后者。
This is because inline and inline-block include whitespace (in your case the line break) between the elements. In your case the combined width of the elements is 50%+50%+whitespace > 100%.
You should either put the two elements on the same row in your HTML document (without space)
Or use HTML comments
I myself prefer the latter.
我不喜欢这个 hack，但它似乎在 Firefox 和 IE6 中都能完成这项工作：
注意
*width: 100%它似乎满足 IE6 的要求，但被 Firefox 忽略。I don't like this hack but it seems to do the job both in Firefox and IE6:
Note the
*width: 100%which seems to satisfy IE6's requirement and is ignored by Firefox.