Question

我希望以下示例中的两个span标记彼此相邻显示，而不是一个在另一个下面显示。如果我将类span.right的宽度设置为49％，它们会彼此相邻显示。我无法弄清楚为什么右侧跨度被推下来，因为右侧跨度有一些看不见的填充/边距，这使得它需要超过50％。我试图在不使用html表的情况下完成此操作。有什么想法吗？

<html>
<head>
    <title>Test Page</title>
    <style type='text/css'>
        * {
            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;
        }
    </style>
</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表一直是一个挑战

Answer 1

float: left;

尝试将其添加到span.left

它会使它向左浮动（如语法所示）。

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

如果你将span.right浮动到右边然后在它们下方添加文本你应该得到一些有趣的结果，要停止这些“有趣的结果”，你可以使用“clear：left / right / both”这将导致块与清晰的造型在任何浮动到左/右/两者的任何东西下。 W3Schools此页面上也有一个页面。

欢迎来到Stackoverflow。

Answer 2

这是因为内联块和内联块在元素之间包含空格（在您的情况下是换行符）。在您的情况下，元素的组合宽度为50％+ 50％+空白＆gt; 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>

我自己更喜欢后者。

Answer 3

我不喜欢这个黑客，但似乎在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忽略。

跨度上的内联块

3 个答案: