Html 需要帮助对齐文本吗

您可以看到一个活生生的示例

您可能想在这里使用一个表

      Age: 23
   Location: Bronx,NY
Nationality: Puerto Rican
  Ocupation: Tailor

年龄：
23
地点：
纽约布朗克斯
国籍：
波多黎各人
眼科：
裁缝

我在这里为您更新了它：

添加了带有CSS的

，以提供您在示例中寻找的对齐方式

代码如下：

HTML

  <table>
    <tr>
      <td>Age:</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Location:</td>
      <td>Bronx,NY</td>
    </tr>
    <tr>
      <td>Nationality:</td>
      <td>Puerto Rican</td>
    </tr>
    <tr>
      <td>Ocupation:</td>
      <td>Tailor</td>
    </tr>
  </table>

---

您可能希望使用表来存储此类数据，而不是无序列表

#personal ul li span.label{
    display: block;
    float: left;
    width: 75px;
    text-align: right;
    padding-right: 10px;
}

年龄：
23
...
...

如果不想使用表格，也可以使用样式为float:left的div

<table>
   <tr>
      <td>Age:</td>
      <td>23</td>
   </tr>
   ...
   ...
</table>

年龄：

地点：

国籍：

观众：

23

纽约布朗克斯

波多黎各人

裁缝

---

如果您希望年龄右对齐，可以将文本对齐：right添加到该分区。

这一个怎么样？如果你想减少空格，那么只需更改填充值

---

我想我应该在这里使用一个

dl

（定义列表），因为您定义了一个术语-

dt

，然后在每个术语上给出“描述”-

dd

。。好的是，你可以得到你想要对齐的两个部分；）

定义列表仅略有不同 来自该列表中其他类型的列表 项目由两部分组成：一个术语和一个术语 描述。该术语由以下公式给出： DT元素，并且仅限于 内联内容。描述是 给定一个包含 块级内容

然后可以浮动

dt

CSS:

<div style="float:left;">
       Age: <br />
       Location: <br />
       Nationality: <br />
       Ocupation: <br />
    </div>
    <div style="float:left;">
       23<br/>
       Bronx,NY<br/>
       Puerto Rican<br/>
       Tailor<br/>
    </div>

dl {border: 1px solid #000;}
dt {float: left; width: 180px; text-align: right; margin-right: 20px;}

HTML:

<div style="float:left;">
       Age: <br />
       Location: <br />
       Nationality: <br />
       Ocupation: <br />
    </div>
    <div style="float:left;">
       23<br/>
       Bronx,NY<br/>
       Puerto Rican<br/>
       Tailor<br/>
    </div>

dl {border: 1px solid #000;}
dt {float: left; width: 180px; text-align: right; margin-right: 20px;}

年龄:23
地点：纽约州布朗克斯
国籍：波多黎各人
职业：裁缝

---

示例：检查我下面的提琴。我喜欢这一个，因为它在divs的上下文中使用了一个span，在这里非常好。如果没有数据，那么标签将向左浮动，有没有办法避免这种情况？你能在JSFIDLE和更新的代码中展示一个例子吗？我会帮你修好的。谢谢像素Bobby这使它#个人li{列表样式：无；清除：两者；}我需要它来清除li标记。稍后再聊，我要走了，谢谢。