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

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

So far left span is glued to center

修改

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

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>

<强>的style.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%; ]

Demo

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;}