CSS:左,中,右对齐同一行的文本

Question

我需要在同一行上左,中,右对齐文本.我有以下文字:

• 左对齐:1/10
• 中心:02:27
• 右对齐:100%

我编写了以下代码,该代码适用于左右对齐文本,但对中心文本无法正常工作.

HTML

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>

CSS

.alignleft {
    float: left;
}
.aligncenter {
    float: left;
}
.alignright {
    float: right;
}

Answer 1

试试这个

更新

HTML

 <div id="textbox">
 <p class="alignleft">1/10</p>
 <p class="aligncenter">02:27</p>
 <p class="alignright">100%</p>
 </div>
 <div style="clear: both;"></div>?

CSS

.alignleft {
  float: left;
  width:33.33333%;
  text-align:left;
}
.aligncenter {
  float: left;
  width:33.33333%;
  text-align:center;
}
.alignright {
 float: left;
 width:33.33333%;
 text-align:right;
}?

在这里演示代码:http://jsfiddle.net/wSd32/1/ 希望这有帮助!

Answer 2

可响应的神奇HTML5方法是使用flex：

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>
<div style="clear: both;"></div>

的CSS

#textbox {
    display: flex;
    justify-content: space-between;
}

演示：

http://jsfiddle.net/sep4kf6a/1/

您会发现它避免了在小屏幕上出现浮标时出现的尴尬包装。

Answer 3

现在是一种全新的，完全不同的方法。

.same-line {
    height: 10px; /*childrens it's all absolute position, so must set height*/
    position: relative;
}
.same-line div{
    display: inline-block;
    position: absolute;
}
.on-the-left{
 left:0px;
}
.on-the-center{
    left: 0%;
    right: 0%;
    text-align: center;
}
.on-the-right{
   right: 0px;
}

<div class="same-line">
    <div class="on-the-left" >it's Left</div>
    <div class="on-the-center" >this Centrer bla bla bla</div>
    <div class="on-the-right" >it's Right</div>
  </div>

Answer 4

Pod 答案的改进：

#textbox {
    display: flex;
}
.alignleft {
    flex: 1;
    text-align: left;
}
.aligncenter {
    flex: 1;
    text-align: center;
}
.alignright {
    flex: 1;
    text-align: right;
}

<div id="textbox">
<p class="alignleft">1/10</p>
<p class="aligncenter">02:27</p>
<p class="alignright">100%</p>
</div>

 

这避免了小屏幕上浮动时出现的尴尬的盒子换行，以及将中间文本居中在 #textbox 的中间。

JSFiddle：

http://jsfiddle.net/secnayup/