Question

我是html和css的新手，所以我怎么能像屏幕截图那样对齐所有分号？

PSD看起来像：

PSD look like

这是我的HTML标记

 <ul>
    <li>Name <span>: John Doe</span></li>
    <li>Age <span>: 30.30.30</span></li>
 </ul>

这是CSS

li span {
    padding-left: 20px;
}

结果是screeshot：

Result of my markup

适当的标记和css会是什么？

Answer 1

对display:table-row使用li，display:table-cell使用label。

＆＃13;

li  {
    padding-left: 20px;
    display: table-row;
}  

li label {
  display: table-cell;
}

li label:not(:first-child) {
    padding-left: 40px;
}

＆＃13;

 <ul>
    <li><label>Name</label><label>: John Doe</label></li>
    <li><label>Age</label><label>: 30.30.30</label></li>
 </ul>

＆＃13;

Answer 2

好的另一个解决方案。对于踢球

＆＃13;

li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

span {
  width: 400px;
  text-align: left;
}

＆＃13;

<ul>
  <li><span>Name</span><span>: John Doe</span></li>
  <li><span>Another Thing</span><span>: John Woe</span></li>
  <li><span>Finally</span><span>: Another last thing</span></li>
</ul>

＆＃13;

Answer 3

＆＃13;

<table>
<tr>
    <td>Name </td><td>: </td><td> John Doe</td>
</tr>
<tr>
    <td>Age </td><td>: </td><td> 30.30.30</td>
</tr>
 </table>

＆＃13;

Answer 4

你可以实现两种方式。

使用table

<table>
    <tr>
        <td>Name</td>
        <td>: John</td>
    </tr>
</table>

或者，如果您想使用ul和li

<ul>
    <li><span>Name </span><span>: John Doe</span></li>
    <li><span>Age </span><span>: 30.30.30</span></li>
 </ul>

li span:first-child {
    width: 200px;
}

Answer 5

希望这会对你有所帮助

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

</style>
</head>
<body>

<table>
  <tr>
    <td>Name</td>
    <td>John Doe</td>
  <tr>
    <td>Age</td>
    <td>30.30.30</td>
  </tr>
</table>

</body>
</html>

Answer 6

您可以在此处使用表格：

<tbody class="table" >
    <tr>
      <td>Name</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Age</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>Job</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

并在 CSS

中

.table td{
  padding-left: 3em;
}

希望demo能帮到你

对齐一组标签和值

6 个答案: