0

.horizontal_dl {
  /*white-space: nowrap;*/
  display: flex;
  flex-direction: column;
}
.horizontal_dl dd {
    margin-left: 155px;
    display: flex;
    line-height: 19px;
}
.horizontal_dl dt {
  /*overflow: hidden;*/
  display: flex;
  flex-basis: 0px;
  
}
dl, dt {
  color: #000;
  font-size: .9em;
}
dl {
  margin-top: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin: 0 0 .563em;
}
.text_upper {
  text-transform: uppercase;
}
 <dl class="horizontal_dl">
   <dt class="text_upper">Full Name</dt>
   <dd>Robert Smith</dd>
   <dt class="text_upper">D.o.b.</dt>
   <dd>05 June 1988</dd>
</dl>

Почему тег <dl> который входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка определений показывается в разных браузерах по разному и как это исправить?

Пример:Если вы смотрите данный код с Сhrome то все нормально будет у вас показыватся но если вы посмотрите с Mozilla (developer edition данный момент у меня стоит) то увидите фантастические отступы которые откуда то взялись .

Вот jsfiddle смотрите в mozille и увидите разницу.

12
  • А зачем на dd и dt висит flex, если потомков у них всё равно нет?
    – andreymal
    Commented 28 февр. 2018 в 12:49
  • @andreymal логично .. :( если удалить получу ненужные отступы.
    – Randall
    Commented 28 февр. 2018 в 12:50
  • Да и вообще зачем здесь flex, на флоатах вроде бы легко верстается jsfiddle.net/89caropd/2
    – andreymal
    Commented 28 февр. 2018 в 12:52
  • Но почему с flex разные результаты в лисе и хроме, я и сам не понял
    – andreymal
    Commented 28 февр. 2018 в 12:52
  • 1
    Непонятно о чём вы говорите, о какой «синергии» речь. Но наверно продолжать не стоит, оффтопик всё-таки)
    – andreymal
    Commented 28 февр. 2018 в 13:10

1 ответ 1

0

Я думаю, что следующий код может помочь вам получить нужные результаты. Я только преобразовал dd, dl и dt часть вашего кода и надеюсь это поможет вам.

dl {
  width: 200px;
  overflow: visible;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
dl dt {
  flex: 0 0 50%;
    color: #000;
  font-size: .9em;
}
dl dd {
  flex:0 0 50%;
  margin-left: auto;
  overflow: hidden;
}

dl {
  margin-top: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin: 0 0 .563em;
}
.text_upper {
  text-transform: uppercase;
}
 <dl class="horizontal_dl">
   <dt class="text_upper">Full Name</dt>
   <dd>Robert Smith</dd>
   <dt class="text_upper">D.o.b.</dt>
   <dd>05 June 1988</dd>
</dl>

Все работает как часы поставтье это в вашь jsfiddle и протестите

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.