Pytanie dotyczące pozycjonowania CSS - Tabele vs. bezwzględne vs. DL

Question

Chciałbym wyrównać pary etykiet/wartości w środku za pomocą CSS bez użycia bezwzględnego pozycjonowania lub tabel (patrz zrzut ekranu). Na tym zrzucie ekranu ustawiłem wartość bezwzględną (tj. 4,500 USD/tydz.), A następnie przesunąłem etykietę w górę. Ale absolut nie działa tak dobrze w IE i słyszałem, że to nie jest dobra technika.

Ale jak mogę osiągnąć ten efekt, gdy etykiety są uzasadnione bez absolutnych?

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

Answer 1

Jestem zdezorientowany, co jest tabelaryczne na temat tych danych? Gdzie są zapisy? Rzędy różnych pól naprawdę nie tworzą stołu w tradycyjnym sensie. (Nie hackując go, aby mieć dwie pozycje w wierszu).

Jeśli interesuje nas ten pomysł, to jaka jest różnica między lewą połówką stołu a prawą stroną? Jakie byłyby nagłówki kolumn, gdyby były?

Preferuję propozycję listy definicji, zdecydowanie lepiej pasuje niż tabela. I nie potrzebujesz dwóch kolumn, jeśli wszystkie ID i DD były zmienne: lewe i szerokość: 25%, w następującej kolejności: Koszt, Zwierzęta, Śpiochy, Palenie, itd ... Dlatego możesz użyć 1 listy definicji, tak jak powinno być.

Chociaż prawdopodobnie będziesz potrzebować wyraźnego: pozostawionego na każdym innym ID, na wypadek gdyby zawartość któregokolwiek z tych elementów zawinęła się w dwa wiersze.

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

Answer 2

Jeśli pokazując danych tabelarycznych nie ma wstydu w użyciu tabeli.

Answer 3

Użyj stałej szerokości div z właściwością CSS text-align. Nie zapomnij spuścić swoich lewych div.

Answer 4

Powiedzmy używasz DL, DT i DD:

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

można użyć następujących przybliżonych CSS (niesprawdzone):

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

Edit: Jak Chris Marasti-Georg wskazał :

Dodatkowo, jeśli chcesz 2 kolumny, stosowanie 2 listy definicji i unoszą je

Answer 5

@jon ma rację, jeśli jego dane tabelaryczne, możesz użyć tabeli. Jednakże, jeśli naprawdę nie chcesz korzystać z tabeli, myślę, że to jest to, co chcesz:

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> 

EDIT @ Chris Marasti-Georg wskazuje, że listy definicji byłyby tutaj bardziej odpowiednie. Zgadzam się, ale myślę, że chciałem pokazać, że to samo można łatwo zrobić z dowolnym elementem blokowym, i nie ma nic w domyślnej stylizacji list definicji, która jest potrzebna do osiągnięcia tego celu.

Answer 6

Co powiesz na temat używania tabeli do układania tabeli, a następnie używania CSS do pozycjonowania tej tabeli w dowolnym miejscu na swojej stronie?

Answer 7

Rozszerzenie na stanowisku Rahul za:

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> 

Przetestowałem to pod FF 3.0.1, IE6 i IE7. Kolor tła jest po prostu pomocny w wizualizacji miejsca rozpoczęcia i zakończenia kolumn.

Answer 8

Krótka uwaga na temat implementacji tego przy użyciu tabel, istnieje kilka konstrukcji, które sprawią, że będzie to dużo dostępne. Najprostszym z nich byłoby proste użycie TH dla etykiet i TD dla wartości. This site ma miłą dyskusję i idzie głębiej w rzeczy takie jak nagłówki dla komórek, itp.

Answer 9

zawsze traktowane jako list definicji mają być stosowane do definicji przedmiotów, a nie dla par klucz/wartość. (9 nie jest definicją "sypialni"). Jednak ta konkretna konstrukcja (listy par klucz/wartość) powodowała argumenty od lat, ponieważ nie ma natywnego semantycznego znacznika, który odzwierciedla to poprawnie.

Idź na DL, jeśli nie mówisz o tym, co to jest definicja. Albo idź po stolik. Tabela z parami klucz/wartość w wierszach, jeśli zakres nagłówka/komórki jest poprawnie ustawiona, jest całkowicie poprawna. Robiłem to ostatnio i wydaje mi się, że jest to najdokładniejsza reprezentacja semantyczna.