css - 如何让三个内联元素有自己的对齐方式？

Question

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

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

我可以重新排序元素并分配样式。如果可能，我想避免使用块元素。

期望的结果：

Left             Center            Right|end of container here

到目前为止，左侧跨度粘在中心

编辑：

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

Answer 1

将所有内容浮动到左侧。

.left, .center, .right {
    float: left;
}

并添加一些填充，这样它们就不会相互接触。

.center {
    padding: 0 30px;
}

---

但是，理想情况下，您应该使容器向左浮动。在这种情况下，容器是h1，所以：

h1 {
    float: left;
}

---

这是一个完整的 jsbin 示例：http:
//jsbin.com/OXolaYi/1/

page.html

  <div id="#container">
    <h1>
      <span class="left">Left</span>
      <span class="center">Center</span>
      <span class="right">Right</span>
    </h1>
    <div class="theRest">rest of container</div>
  </div>

样式.css

h1 {
    float: left;
    margin-right: 10px;
}
.center {
    padding: 0 30px;
}
.theRest {
    float: left;
    font-size: 30px;
    padding: 20px;
    border-left: 1px solid #000;
}

Answer 2

你可以做这样的事情。

HTML：

<div class="main">
    <div class="col">&nbsp;</div>
    <div class="col">&nbsp;</div>
    <div class="col">&nbsp;</div>
    <div class="spacer">&nbsp;</div>
</div>

CSS：

.main { text-align: justify; }
.col { display: inline-block; width: 100px; background: red; } 
.spacer { display: inline-block; width: 100%; ]

演示

Answer 3

这需要稍微调整您的 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 设置的大小

Answer 4

给你，jsFiddle

html

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

CSS

.left {position:absolute;
  left:0;top:0;}

.center {
  text-align:center;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;}

.right {
    position:absolute;
    right:0;top:0;}