CSS - 水平对齐文本

Question

我正在尝试在我的网页上做两件事。一个是我希望将两条线对齐，并且像这样的间隙。

我想保持它们之间的差距。第二，我希望我所有的线都在平等的地方开始。我的意思是你可以看到Singer已经改变的第二行的第二行是位置和伸展到后面。想要这样做

          Singer/songwriter/record producer
          Singer/songwriter/record producer/actor
          Singer/songwriter/record producer/actor

像这样

感谢

Answer 1

几个选项

<table style="border:0;width:100%">
   <tr>
      <td style="width:30%;padding-right:20%;">
         Artist name
      </td>
      <td style="width:50%;">
         Singer/songwriter...
      </td>
   </tr>
</table>

或者

<div style="float:left; width:30%;padding-right:20%;">
   Artist name
</div>
<div style="float:left; width:50%;">
   Singer/songwriter...
</div>

Answer 2

DEMO

HTML

<div>
    <div class="float-left"> 
        AkonP .Diddy
    </div>
    <div class="float-right">
          Singer/songwriter/record producer
    </div>    
        <div class="float-left"> 
        Rick Ross
    </div>
    <div class="float-right">
          Singer/songwriter/record producer
    </div>    
        <div class="float-left"> 
     Michael Vick
    </div>
    <div class="float-right">
          Singer/songwriter/record producer
    </div>    
</div>   

CSS

.float-left{

    float:left;
    width:30%;
}
.float-right{

    float:left;
    width:70%;
}

Answer 3

您可能必须使用不同的元素。我认为你在做（总是发布一些代码）：

<li>
    <span style="float: left;">Akonp.Diddy</span>
    <span style="float:right">Singer/songwriter/record producer</span>
</li>

尝试将固定width的第一个范围添加到第一个<span>，将float第二个范围添加到left。你可能会看到两个元素浮动到同一个方向的结果，但是第一个元素有一个固定的width，第二个元素将被拉动。

Answer 4

为此您可以使用特殊字符....我在这里为您创建了一个小提琴

Data data

。http://jsfiddle.net/vashuStarPro/8mr66gjf/。它为字母增加了空间。见小提琴

Answer 5

我的回答是使用box-flex :) jsfiddle

<div id="p0">
<div id="p1">
    <ul>
        <li>AkonP.Diddy</li>
        <li>Rick ross</li>
    </ul>
</div>
<div id="p2">
    <ul>
        <li>Singer/songwriter/record producer</li>
        <li>Singer/songwriter/record producer/actor</li>
    </ul>
</div>

#p0 {
display:-moz-box;
display:-webkit-box;
display:box;
width:100%;
}
#p1 {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#p2 {
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
ul {
padding:0;
list-style:none;
margin:0;
}