css - 如何让三个内联元素各自对齐？

Question

在下面的文档中，我希望每个跨度都有自己的对齐方式。

<h1>
    <span class="left">Left</span>
    <span class="center">Center</span>
    <span class="right">Right</span>
</h1>

我可以重新排序元素并指定样式。如果可能，我想避免使用 block 元素。

期望的结果:

Left             Center            Right|end of container here

So far left span is glued to center

编辑:

由于一些愚蠢的编程/布局错误，我的左浮动总是失败。 抱歉这个愚蠢的问题。

Answer 1

这需要稍微调整您的 html。但是请看 jsfiddle:

http://jsfiddle.net/2E3ve/

h1 {
    width: 500px;
    background: green;
    text-align: center;
}
.left {
    text-align: left;
    float: left;
}
.right {
    text-align: right;
    float: right;
}

主要的h2文本居中对齐，左浮动左对齐，右对齐则相反。

这将适合您为 h2 设置的大小