Блог

Главная - Вопросы по программированию - CSS-стилизация списка определений

CSS-стилизация списка определений

#css

#css

Вопрос:

Я пытаюсь настроить некоторый HTML-код в стиле CSS, чтобы он выглядел как следующее изображение. Для этого я решил использовать список определений с некоторыми классами.

Я пытаюсь

  1. переместите цену так, чтобы она сразу следовала за тегом dt и
  2. удалите dd стиль по умолчанию, чтобы он был полностью слева.

Вот мой HTML:

 <dl>
    <dt>Classic Italian Hoagie</dt>
    <dd class="price">$8</dd>
    <dd class="desc">Pepperoni, salimi, capicola, banana peppers, romaine, tomatoes, provolone amp; housemade olive oil amp; herb vinaigrette on a hoagie bun</dd>
</dl>

Комментарии:

1. Какой CSS вы уже пробовали?

2. список определений не является хорошим вариантом для этого типа стиля

3. @sandeep я думаю, что все в порядке. Что бы вы предложили в качестве замены? Много беспорядочных li s с классами?

4. @JamWaffles; проверьте мой пример с меньшим количеством классов css и правильной разметкой

5. jsfiddle.net/hLFL6/11

Ответ №1:

Чтобы ответить на первую часть вашего вопроса, плавающие dt и .price слева выстроят их рядом друг с другом.

Затем вы можете получить другие dd теги clear:left , которые решают вашу проблему.

 dt, .price{
    float:left;
    clear:none;
    margin-right:5px;
}

dd{
    clear:left;
}

Рабочий пример

Что касается вашего второго вопроса, я не вижу никакого стиля по умолчанию, вызывающего поля на dd . Для меня это выглядит так, как требуется, но если нет, вы всегда можете поставить a margin-left:0; на dd .