7

我希望以下示例中的两个span标签彼此相邻显示，而不是在另一个下方显示。如果我将width类的span.right 设置为 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 表一直是一个挑战

4

3 回答 3

3 
float: left;

尝试将其添加到 span.left

它将导致它向左浮动（如语法所示）。

无论如何，我都不是 CSS 专家，所以请不要将此视为无可争辩的事实，但我发现当某些东西浮动时，它下面的东西的垂直位置没有任何区别。

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

欢迎来到 Stackoverflow。

于 2008-08-29T16:14:25.247 回答
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 注释

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

我自己更喜欢后者。

于 2013-04-24T11:45:47.203 回答
1

我不喜欢这种技巧，但它似乎在 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 忽略。

于 2008-08-29T17:50:18.900 回答