Показать термин определения и описание в строке

Question

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

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

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

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

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

Answer 1

Примечание: Вы должны избегать пробелов между элементами 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

Результат должен выглядеть примерно так: (демо)

DT DD DD
DT DD DD

Если вы хотите быть очень крутым , вы можете заменить 2-е правило следующим:

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

dt:after {
    content: ':';
}

Результат должен выглядеть примерно так: (демо)

DT: DD, DD
DT: DD, DD

Answer 2

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

dt, dd {float: left;}
дд + дт {очистить: слева; }

то есть таблица стилей 6 & 7:

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

IE6

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

Надеюсь, это поможет.

Answer 3

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

просто дать им все макет , самый простой способ - использовать свойство CSS .yourstuff { зум: 1; }

Answer 5

Вы пытались очистить поплавок в dt's? Как это:

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

---

Редактировать: Вот кросс-браузерное решение, которое проверяет:

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>

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