Как сделать так, чтобы слово «dl» было перенесено так же, как таблица «td»? - PullRequest
Новая
       25

Как сделать так, чтобы слово «dl» было перенесено так же, как таблица «td»?

1 голос
/ 31 марта 2019

Я стараюсь по возможности избегать использования таблиц для форматирования.

В таблице, если ячейка в моем втором столбце нуждается в переносе, она будет переноситься только внутри этой ячейки. Когда я пытаюсь использовать список (dl), «второй столбец» (dd) переносится на всю строку. 

dt {
  display: block;
  float: left;
  text-align: right;
  color: black;
  width: 150px;
}

dt::after {
  content: ":";
  padding-left: .5em;
  padding-right: .5em;
}

dd {
  display: block;
  color: blue;
}
<dl>
  <dt>System Type</dt>
  <dd>My System Type</dd>
  <dt>Manufacturer</dt>
  <dd>Very very very very very long second column</dd>
</dl>

Снимок экрана:

(I'm not allowed to embed images yet)

1 Ответ

0 голосов
/ 02 апреля 2019

Я думаю, вам придется жестко задавать ширину первого столбца, это единственный способ, которым я смог добиться какого-либо прогресса, но я думаю, что это то, что вы ищете. Полный кредит, где это должно, я был вдохновлен этим ответом , который использовал проценты. В этом сценарии получается лучше, если вместо этого вы жестко закодируете ширину с пикселями, чтобы у вас не возникало растущего / уменьшающегося разрыва между вашими «столбцами», как это было бы с процентами.

Вам нужно настроить значение 120px в соответствии с вашими потребностями, это то, что выглядело лучше всего с двумя предоставленными значениями. 

* {
    margin: 0;
}
dl {
    width: 100%;
}
dt {
    float: left;
    text-align: right;
    /* Hard code the width of the first column here */
    width: 120px;
}
dt::after {
    content: ":";
    padding-left: .5em;
    padding-right: .5em;
}
dd {
    float: left;
    /* Hard code the width of the 2nd column here...
       ... make it take up all the remaining space of the parent
    */
    width: calc(100% - 120px);
}
<dl>
    <dt>System Type</dt><dd>My System Type</dd>
    <dt>Manufacturer</dt><dd>Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column Very very very very very long second column</dd>
</dl>
...