Geek asks and answers

Need help aligning text

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

You can see a live example here.

+3
source share
6 answers

I updated it for you here: http://jsfiddle.net/MUFcb/11/

Added <span>with CSS to give you the alignment you were looking for in your example.

Here is the code:

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;
}
+1
source

I think I would use dl(definition list) here, as you define the term - dtand then give a "description" - dd, in each term. it's good that you get two parts that need to be aligned, but you want;)

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>

:

+3

, , ...

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

, .

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

, divs, float: 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.

0

More articles:


All Articles