Wyświetlacz termin definicja i inline

Question

Używam listę definicji dla niektórych elementów na stronie i trzeba je wyświetlać inline np Opis: oni normalnie wyglądać następująco:

< termin def >
        < def desc >
        < def desc >

i muszę im przypominać (uwaga wielokrotna DD):

< termin def > < def desc > < def desc >
< termin def > < def desc > < def desc >
< okres kr. > < def desc > < def desc >

mogę je do pracy grzywny za pomocą pływaków w Moz ale bez względu na to, co staram się nie będzie działać w IE, I zazwyczaj coś takiego:

< def termin > < def desc > < def desc > < def desc > < def desc > < def desc > < def desc >
< termin def >
< termin def >

Czy ktoś znalazł rozwiązanie tego problemu, naprawdę chciałbym, aby uniknąć dodawania dodatkowych znaczników w miarę możliwości, ale krótki zmiany je do listy nieuporządkowanej im pomysłów :(

z góry dzięki

Answer 1

próbowałeś czyszczenie float w dt's? Tak:

dt { clear: left; } 
dd { float: left; } 

---

Edit: Oto rozwiązanie cross-browser, który sprawdza:

dd,dt{ display: inline; } 

<dl> 
<dt>1</dt><dd>1.1</dd><dd>1.2<br/></dd> 
<dt>2</dt><dd>2.1</dd><dd>2.2<br/></dd> 
</dl> 

Jednak, jak widać, że br jest dość nieprzyjemny i nie-semantyczne. Mam nadzieję, że ktoś inny może wymyślić lepsze rozwiązanie.:)

Answer 2

domyślny stylów

dt, dd {pływak: lewy;}
dd + dt {jasne: lewy; }

tj 6 & 7 stylów:

dt {pływak: brak;} dd { pozycji: względna; do góry: -19px;/zależności od line-height/ }

IE6

http://code.google.com/p/ie7-js/

nadzieję, że pomaga.

Answer 3

Po prostu give them all layout, najprostszym sposobem jest użycie właściwości CSS .yourstuff { powiększ: 1; }

Answer 4

To działa (co prawda tylko przetestowane na FF i Opera 9.x 3.xx, zarówno na Ubuntu 8.04):

CSS:

p { 
    display: block; 
} 
dl { 
    display: block; 
    margin: 0; 
} 
dt { 
    display: block; 
    width: 7em; 
    border-right: 1px solid #ccc; 
    margin: 0; 
} 
dd { 
    display: none; 
    margin: 0; 
    position: relative; 
    /* 'position: absolute' would probably work better, 
     and lose the line break left by the 'position: relative;' */ 
    top: -1em; 
    left: 8em; 
} 
dt:hover + dd, dt:hover + dd + dd { 
    /* Couldn't find a way to target all sibling 
     dds of a dt without the + operator (and listing all of them), 
     but it works, albeit kludgy */ 
    display: inline; 
} 
dd:after { 
    content:"; "; 
} 
dd:last-child:after { 
    content:""; 
} 

HTML:

<div id="content"> 
    <dl> 
     <dt>first dt</dt><dd>first dt's first dd</dd><dd>first dt's second</dd> 
     <dt>second dt</dt><dd>second dt's first dd</dd><dd>second dt's second</dd> 
     <dt>third dt</dt><dd>third dt's third dd</dd><dd>third dt's second</dd> 
    </dl> 
</div> 

Link do działającego przykładu, przetestowany pod FF 3 i Operą 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

Uwaga: trzeba unikać przestrzenie pomiędzy elementami DD do tej pracy działa poprawnie.

Nie potrzeba hacki dla IE8 +:

dd, 
dt{ 
    display: inline; 
    margin: 0; 
} 
dd:before { 
    content: ' '; /* space them */ 
} 
dt:before { /* insert line break before <dt> */ 
    content:"\A"; 
    white-space:pre; 
} 
dt:first-child:before { /* disable line break before the first <dt> */ 
    content: none; 
} 

Jeśli nie muszą wspierać IE8, pomiń 4th regułę CSS i po prostu użyć tego selektor 3. One: dt:not(:first-child):before

Wynik powinno być coś takiego: (demo)

DT DD DD 
DT DD DD 

Jeśli chcesz być prawdziwy chłodny, można rep koronki 2nd reguły z tym:

dd + dd:before { 
    content: ', '; /* add comma between definitions */ 
} 

dt:after { 
    content: ':'; 
} 

Wynikiem powinno być coś takiego: (demo)

DT: DD, DD 
DT: DD, DD