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

前端之家收集整理的这篇文章主要介绍了CSS:左,中,右对齐文本在同一行前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要离开,中心,&在同一行右对齐文本。我有以下文字

>左对齐: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;
}

解决方法

尝试这个

更新

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/希望这可以帮助!

原文链接:https://www.f2er.com/css/219680.html

猜你在找的CSS相关文章