Блог

Главная - Вопросы по программированию - dl табличный — отсутствует нижняя строка границы

dl табличный — отсутствует нижняя строка границы

#html #css #xhtml

#HTML #css #xhtml

Вопрос:

Отсутствует пробел в нижней границе строки после <dt>

что является причиной этого и как это исправить?

 <dl class="rows">
  <dt>Full Name</dt>
  <dd>Peter Gates</dd>

  <dt>Email Address</dt>
  <dd>email@email.com</dd>
</dl>

CSS:

 <style>
    .rows dl {
        float: left;
    }

    .rows dt {
        float: left;
        clear: left;
        width: 150px;
        font-weight: bold;
        padding: 5px;
        border-bottom: 1px solid black;
    }

    .rows dd {
        width: 150px;
        float: left;
        padding: 5px;
        border-bottom: 1px solid black;
    }
</style>

Не стесняйтесь, если css можно улучшить и уменьшить.

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

1. Разница между dt и dd ?

2. jsFiddle здесь . Я не вижу проблемы (Chrome).

3. @bazmegakapa: Попробуйте снять флажок «Нормализованный CSS».

4. @thirtydot Да, это очень помогло :). Всегда можно узнать их инструменты немного лучше.

Ответ №1:

В частности, вам нужно добавить margin: 0 в .rows dd .

Вот как я бы написал / улучшил ваш CSS (с исправлением):

Смотрите: http://jsfiddle.net/gw4zW/3 /

 .rows {
    float: left;
}
.rows dt, .rows dd {
    float: left;
    width: 150px;
    padding: 5px;
    margin: 0;
    border-bottom: 1px solid black;
}
.rows dt {
    clear: left;
    font-weight: bold;
}