Question

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

您可以看到实时示例Here

Answer 1

我认为我在这里使用dl（定义列表）来定义术语 - dt，然后在每个术语上给出“说明” - dd。好的是你需要对齐你需要的两个部分;）

Definition Lists:

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

然后你可以浮动dt的

<强> CSS：

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

<强> HTML：

<div id="personal">
    <dl>
       <dt>Age:</dt> <dd>23</dd>
       <dt>Location:</dt> <dd>Bronx,NY</dd>
       <dt>Nationality:</dt><dd>Puerto Rican</dd>
       <dt>Ocupation:</dt><dd>Tailor</dd>
    </dl>
</div>

示例：HERE

Answer 2

我在这里为你更新了： http://jsfiddle.net/MUFcb/11/

添加了<span> CSS，以提供您在示例中寻找的对齐方式。

以下是代码：

<强> HTML

<div id="personal">
   <ul>
       <li><span class="label">Age:</span> 23</li>
       <li><span class="label">Location:</span> Bronx,NY</li>
       <li><span class="label">Nationality:</span> Puerto Rican</li>
       <li><span class="label">Ocupation:</span> Tailor</li>
   </ul>
</div>

<强> CSS

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

Answer 3

您可能希望将表用于该类数据，而不是无序列表......

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

Answer 4

你可能想在这里使用一个表。

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

Answer 5

如果您不想使用表格，您还可以使用格式为 float

的div

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

如果您希望年龄对齐，可以将 text-align：right 添加到该div。

Answer 6

这个怎么样？如果你想减少空格，那么只需更改填充值 http://jsfiddle.net/MUFcb/8/

需要帮助对齐文本

6 个答案:

示例：HERE