Html CSS-水平对齐文本

我试图在我的网页上做两件事。一个是我想把两条线彼此前面的间隙对齐，就像这样。

我想保持他们之间的差距。第二，我希望我所有的线路都从相同的位置开始。我的意思是你们可以看到第二排的第二行，歌手改变了位置，向后伸展。想这样做吗

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

像这样

---

谢谢

您可能需要使用不同的元素。我猜你正在做（总是发布一些代码）：

阿肯普，迪迪
歌手/歌曲作者/唱片制作人

尝试将第一个跨度a固定的

宽度

添加到第一个

，并将

浮动

第二个跨度添加到

左侧

。您可能会看到两个元素朝着同一方向浮动，但由于第一个元素具有固定的

宽度

，因此将拉动第二个元素。

两个选项

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

艺人名称
歌手/词曲作者。。。

或

艺人名称
歌手/词曲作者。。。

HTML

---

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

Datadata

。。它为字母添加了空格。请参见fiddle

我的答案是使用box flex:）

---

是的，没错，我是这么做的。。我已经按照你的建议做了，但是现在第二栏已经取代了第一栏。意味着他们改变了。我所做的是让两者都向左浮动，并且只为第一个定义宽度。名称

float right

可能会让一些人感到困惑，因为它会向左浮动。可以使用

float-1

和

float-2

。

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

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

.float-left{

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

    float:left;
    width:70%;
}

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