CSS：左，中，右对齐在同一行上的文本 | 右对齐在同一行上的文本

本文介绍了CSS：左，中，右对齐在同一行上的文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要离开，居中，右对齐文本在同一行。我有以下文字：

左对齐：1/10

中心：02:27

右对齐：100％

我写了以下代码，

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

解决方案

更新

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

在这里演示代码：
希望这有帮助！

I need to left, center, & right align text on the same line. I have the following text:

Left Align: 1/10
Center: 02:27
Right Align: 100%

I wrote the following code which works for left and right aligning text but does not work correctly for the center text.

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

解决方案

Try this

UPDATED

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

Demo the code here: http://jsfiddle.net/wSd32/1/Hope this helps!

这篇关于CSS：左，中，右对齐在同一行上的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！