跨度上的内联块答案

【问题标题】：inline-block on span跨度上的内联块
【发布时间】：2010-09-07 06:26:11
【问题描述】：

我希望以下示例中的两个 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 表一直是一个挑战

【问题讨论】：

为什么支持IE6？ ie6nomore.com

标签： html css css-float internet-explorer-6

【解决方案1】：

float: left;

尝试将其添加到 span.left

它会导致它向左浮动（如语法所建议的那样）。

我无论如何都不是 CSS 专家，所以请不要将此视为无可争辩的事实，但我发现当某物浮动时，它对其下方的垂直位置没有影响。

如果您将 span.right 浮动到右侧，然后在其下方添加文本，您应该会得到一些有趣的结果，要停止这些“有趣的结果”，您可以使用“clear: left/right/both”，这将导致块清晰的样式位于浮动到左/右/两者的任何东西下方。 W3Schools也有这个属性的页面。

欢迎来到 Stackoverflow。

【讨论】：

感谢您的快速回答，添加 float:left 确实使 2 个跨度彼此相邻渲染。但是我不明白为什么跨度在没有浮动的情况下被推下。是什么推动了它？
跨度的高度是它为我推低的原因，很可能也是你的原因。

【解决方案2】：

这是因为 inline 和 inline-block 在元素之间包含空格（在您的情况下为换行符）。在您的情况下，元素的组合宽度为 50%+50%+空格 > 100%。

您应该将这两个元素放在 HTML 文档的同一行（没有空格）

<div class='header'>
    <span class='left'>Left Span 50% width</span><span class='right'>Right Span 50% width</span>
</div>

或者使用 HTML cmets

<div class='header'>
        <span class='left'>Left Span 50% width</span><!--
     --><span class='right'>Right Span 50% width</span>
</div>

我自己更喜欢后者。

【讨论】：

【解决方案3】：

我不喜欢这种 hack，但它似乎在 Firefox 和 IE6 中都能胜任：

span.right {
  vertical-align:top; 
  display:inline-block;
  text-align:right;
  height:80px;
  width:50%;
  *width:100%;
  background-color:red;
}

注意*width: 100%，它似乎满足 IE6 的要求，但被 Firefox 忽略了。

【讨论】：