Geek Answers Handbook

CSS Positioning Question - Tables vs. Absolute and DL

I would like to align label / value pairs in the center using CSS without using absolute positioning or tables (see screenshot). In this screenshot, I positioned the value (i.e. $ 4,500 / wk) as absolute, and then placed the label directly against it. But absolute doesn't work so well in IE, and I heard that this is not a very good technique.

But how can I get this effect when the tags are completely justified without an absolute?

alt text http://www.amherstparents.org/files/shot.jpg

+5
source share
9 answers

, ? ? . ( , , )

, ? , ?

, , . , DT DD float: left width: 25% : Cost, Pets, Sleeps, Smoking .. 1 , .

, , : DT , .

<style>
    dl
    {
        float:left;
        width:100%;
    }
    dt,
    dd
    {
        float:left;
        width:24%;
        margin:0;
        padding:0;
    }
    dt
    {
        text-align:right;
        padding-right:.33em;
    }
    dd
    {
        text-align:left;
    }
</style>
<dl>
    <dt>Cost:</dt>
    <dd>$4,500/wk</dd>
    <dt>Pets:</dt>
    <dd>No</dd>
    <dt>Sleeps:</dt>
    <dd>1</dd>
    <dt>Smoking:</dt>
    <dd>No</dd>
</dl>
+9

, .

+13

CSS text-align. divs .

+3

, DL, DT DD:

<dl>
<dt>Cost:</dt>
<dd>$4,500/wk</dd>
<dt>Sleeps:</dt>
<dd>1</dd>
</dl>

CSS ():

dl { width: 200px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; }

: -:

, 2 , 2

+3

@jon , , . , , , , :

CSS

.label {
  min-width: 20%;
  text-align: right;
  float: left;
}

HTML

<div class="pair">
  <div class="label">Cost</div>
  <div class="value">$4,500/wk</div>
</div>
<div class="pair">
  <div class="label">Sleeps</div>
  <div class="value">1</div>
</div>
<div class="pair">
  <div class="label">Bedrooms</div>
  <div class="value">9</div>
</div>

@ - , . , , , , , .

+2

:

CSS

#list { width: 450px; }
#left { float: left; background: lightgreen; }
#right { float: right; background: lightblue; }
dl { width: 225px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; padding-left: 5px; }

HTML

<div id="list">
    <dl id="left">
        <dt>Cost:</dt>
        <dd>$4,500/wk</dd>
        <dt>Sleeps:</dt>
        <dd>1</dd>
        <dt>Bedrooms:</dt>
        <dd>9</dd>
        <dt>Baths:</dt>
        <dd>6</dd>
    </dl>
    <dl id="right">
        <dt>Pets:</dt>
        <dd>No</dd>
        <dt>Smoking:</dt>
        <dd>No</dd>
        <dt>Pool:</dt>
        <dd>No</dd>
        <dt>Waterfront:</dt>
        <dd>No</dd>
    </dl>
</div>

FF 3.0.1, IE6 IE7. , , .

+2

CSS , ?

0

, , . TH TD . , ..

0

, , /. (9 "" ). ( /) , , .

Go for DL ​​unless you are anal about what a definition is. Or go to the table. A table with key / value pairs in rows, if the header / cell area is set correctly, is absolutely valid. I did this recently, and this seems to be the most semantically accurate representation.

0
source

More articles:


All Articles