css - 如何沿轴对齐文本？

Question

我想让左列右对齐，右列左对齐，这样它们就沿着中心轴排列，如下所示:

 16 January 2013 | Here is a line of text. 
26 December 2013 | Another line of text here. 
      4 May 2011 | Here is something else. 

HTML 在 <span> 中s，像这样:

<div class="line"> 
    <span class="date">16 January 2013</span> <span class="text">Here is a line of text.</span>
</div> 

我一直在尝试使用 .line { display: table-row; } 来做到这一点和 .line span { display: table-cell; }但它似乎不起作用。

Answer 1

试试这个..

<div class="line"> 
    <div style="width:50%;float:left;text-align:right;" class="date">16 January 2013</div>     
    <div style="width:50%;float:left;text-align:left;" class="text">Here is a line of text.</div>
</div> 

div-s 适合你吗？ :D