Дисплей и описание рядный

Question

Я использую список определений для некоторых элементов на странице, и они нужны для отображения рядный, например: они обычно выглядеть:

< термин Защиту >
        < защиту убывание >
        < защиту по убыванию >

и мне нужно, чтобы они выглядели как (обратите внимание на множественное DD):

< термин Защиты > < Защита DESc > < Защита DESc >
< термин Защиты > < Защита DESc > < Защита по убыванию >
< термина Защиты > < Защиту по убыванию > < Защиту по убыванию >

я могу получить их, чтобы нормально работать с использованием поплавков в Moz, но независимо от того, что я стараюсь они не будут работать в IE, я обычно получить что-то вроде:

< Защиты термин > < Защита по убыванию > < Защиты по убыванию > < Защиты по убыванию > < Защиты по убыванию > < Защиты по убыванию > < Защита убывание >
< термин Защиты >
< термин Защиты >

Кто-нибудь нашли решение этой проблемы, я бы очень хотел, чтобы избежать добавлений дополнительной разметки, где это возможно, но короткие изменений их неупорядоченный список им из идей :(

заранее спасибо

Answer 1

вы пробовали очистка поплавка в dt? Как это:

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

---

Edit: Вот кроссбраузерное решение, которое подтверждает:

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> 

Однако, как вы можете видеть, что уш довольно противный и не семантический. Надеюсь, кто-то другой может придумать лучшее решение.:)

Answer 2

по умолчанию таблица стилей

дт, дд {поплавок: левый;}
дд + дт {ясно: влево; }

т.е. 6 & 7 таблицы стилей:

дт {поплавок: нет;} { дд положение: относительная; верх: -19px;/в зависимости от вашей линии высоты/ }

ie6

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

Надежда, что помогает.

Answer 3

только give them all layout, самый простой способ - использовать свойство CSS .ий { zoom: 1; }

Answer 4

Это работает (правда, только проверенные на FF 3.xx и Opera 9.x, как на 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> 

Ссылка на рабочий пример, проверенная под FF 3 и Opera 9.x:
http://www.davidrhysthomas.co.uk/so/dls.html

Answer 5

Примечание: вы должны избегать пробелов между элементами DD для этой работы корректно работают.

Нет необходимости в хаки для 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; 
} 

Если вам не нужна поддержка IE8, пропустить 4-е правило CSS и просто использовать этот селектор для 3-го один: dt:not(:first-child):before

Результат должно быть что-то вроде этого: (demo)

DT DD DD 
DT DD DD 

Если вы хотите быть реальный крутой, вы можете респ шнурок 2-ое правило с этим:

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

dt:after { 
    content: ':'; 
} 

Результат должен быть что-то вроде этого: (demo)

DT: DD, DD 
DT: DD, DD