需要幫助對齊文本

Question

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

你可以在這里看到一個實例

Answer 1

我想我會在這里使用dl （定義列表），因為你要定義一個術語 - dt ，然后在每個術語上給出'description' - dd 。好的是你得到了你需要對齊的兩個部分，但是你我喜歡;）

定義列表：

定義列表與其他類型的列表略有不同，列表項由兩部分組成：術語和描述。 該術語由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/

添加了帶有CSS的<span> ，以提供您在示例中尋找的對齊方式。

這是代碼：

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

如果你不想使用表格，你也可以使用具有浮動風格的div ：left

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