Как стилизовать dt и dd, чтобы они были на одной линии?

212

Используя CSS, как я могу стилизовать следующее:

<dl>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

Таким образом, содержание dtшоу в одном столбце и содержание ddв другом столбце, с каждым dtи соответствующим ddна одной строке? Т.е. производить что-то похожее на:

формат таблицы

avernet
источник
Так же, как полезное примечание: если вы хотите контролировать интервал между строками dts и dds, проверьте это: stackoverflow.com/q/896815/114029 Эти мощные теги делают формы стилей действительно простыми и красивыми.
Лениэль Маккаферри
Также смотрите stackoverflow.com/questions/896815/… в частности, принятый ответ stackoverflow.com/a/896840/1037948
drzaus
1
Пожалуйста, рассмотрите возможность изменения принятого ответа на этот вопрос: stackoverflow.com/a/44599527/3853934
Михал Перлаковский

Ответы:

140

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}
<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

eozzy
источник
2
Спасибо! Этот совет CSS помог мне отформатировать Zend Form без необходимости кодировать классы декоратора форм.
devNoise
Похоже, что вы не можете добавить нижнее поле или отступ для буксировки "строк", используя этот метод.
Грэк
7
Я рекомендую добавить clear: leftк стилю dt, чтобы они оставались встроенными, даже если им нужно обернуть.
Симон
1
Это * { ... }утверждение заставляет все терять отступы и отступы, а удаление его искажает DL. Использование класса тоже не поможет. Кажется, что если я хочу что-нибудь, кроме DL, мне придется везде обходиться без наценок и прокладок ... Или?
Эрк
Это ведет себя неловко, когда вы выбираете (двойной щелчок) первое слово в <dd>. Он также выделяет текст внутри <dt>, если между <dt> и <dd> нет пробелов (или & nbsp; если вы используете htmlmin).
KFunk
122

У меня есть решение без использования поплавков!
проверить это на codepen

А именно

dl.inline dd {
  display: inline;
  margin: 0;
}
dl.inline dd:after{
  display: block;
  content: '';
}
dl.inline dt{
  display: inline-block;
  min-width: 100px;
}



Обновление - 3 - го января 2017: решение , основанное я добавил прогибается ящик для этой проблемы. Проверьте это в связанном codepen и уточните его в соответствии с потребностями. Спасибо!

dl.inline-flex {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 300px;      /* set the container width*/
  overflow: visible;
}
dl.inline-flex dt {
  flex: 0 0 50%;
  text-overflow: ellipsis;
  overflow: hidden;
}
dl.inline-flex dd {
  flex:0 0 50%;
  margin-left: auto;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}
Navaneeth
источник
2
Отлично! Этот злой поплавок только что решил одну проблему, дав мне две новые (вроде без вертикального выравнивания). Приятно, что это прошло.
грипп
8
Это хорошо работает с коротким текстом в части DD; если текст слишком длинный, он обернется и отобразится под частью DT.
Риккардо Мурри
3
Это работает, даже если некоторые элементы списка пусты. Большой!
Томас Кубес
@ tjm1706: Я думаю, что решение на основе flex может обрабатывать более длинные текстовые регистры. спасибо :)
Navaneeth
@navaneeth Великий Sol'n. Чтобы получить точки между словом и определением, я добавил: dl.inline-flex dt: after {content: "................"} Я фактически использую здесь 150 точек, чтобы достаточно. Вам также нужно добавить пробел: nowrap к dt
MERM
61

CSS Grid layout

Как и таблицы, макет сетки позволяет автору выравнивать элементы по столбцам и строкам.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Чтобы изменить размеры столбцов, взгляните на grid-template-columnsсвойство.

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}
<dl>
  <dt>Mercury</dt>
  <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  <dt>Venus</dt>
  <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  <dt>Earth</dt>
  <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
</dl>

yckart
источник
Это именно то , что я хочу. caniuse.com/#feat=css-grid - не такой универсальный, как хотелось бы, но сносно поддерживается.
Iiridayn
59

Если вы используете Bootstrap 3 (или ранее) ...

<dl class="dl-horizontal">
    <dt>Label:</dt>
    <dd>
      Description of planet
    </dd>
    <dt>Label2:</dt>
    <dd>
      Description of planet
    </dd>
</dl>
silvster27
источник
14
Если вы посмотрите на CSS Bootstrap, вы сможете получить представление о том, как его стилизовать, даже не используя Bootstrap, хотя мне очень нравится этот фреймворк. Вот фрагмент кода, игнорирующий медиазапросы для адаптивного дизайна для простоты примера: dl {margin-top: 0; margin-bottom: 20px} dt, dd {line-height: 1.428571429} dt {font-weight: 700} dd {margin-left: 0} .dl-горизонтальный dt {float: left; ширина: 160px; очистить: left; выравнивание текста: right; переполнение: скрытое; переполнение текста: многоточие; пробел: nowrap} .dl- горизонтальный dd {margin-left: 180px}
Тим Франклин,
8
dl-horizontalбыл фактически исключен из Bootstrap 4. В BS4, вам нужно использовать классы сетки вместо этого.
Scribblemacher
22

Предполагая, что вы знаете ширину поля:

dt { float: left; width: 100px; }
dd { margin-left: 100px; }
наследственный
источник
2
Я бы не назвал это чистым, потому что вы жестко закодировали поля.
Лиам Доусон
6
Чистота: имеет простую, четкую и приятную форму. Ответ короткий. Это решает проблему в трех утверждениях. Незнание маржи не было требованием как часть вопроса.
наследственный
6
Чистый обычно используется для разметки в этих стилях вопросов. В любом случае, добро пожаловать в StackOverflow, и я рекомендую вам внести подобные предположения в основную часть вашего вопроса, просто для ясности.
Лиам Доусон
8

Поскольку я еще не видел пример, который подходит для моего варианта использования, вот наиболее полное решение, которое я смог реализовать.

dd {
    margin: 0;
}
dd::after {
    content: '\A';
    white-space: pre-line;
}
dd:last-of-type::after {
    content: '';
}
dd, dt {
    display: inline;
}
dd, dt, .address {
    vertical-align: middle;
}
dt {
    font-weight: bolder;
}
dt::after {
    content: ': ';
}
.address {
    display: inline-block;
    white-space: pre;
}
Surrounding

<dl>
  <dt>Phone Number</dt>
  <dd>+1 (800) 555-1234</dd>
  <dt>Email Address</dt>
  <dd><a href="#">example@example.com</a></dd>
  <dt>Postal Address</dt>
  <dd><div class="address">123 FAKE ST<br />EXAMPLE EX  00000</div></dd>
</dl>

Text

Как ни странно, это не работает с display: inline-block. Я полагаю, что если вам нужно установить размер любого из dtэлементов или ddэлементов, вы можете установить dlотображение как display: flexbox; display: -webkit-flex; display: flex;и flexсокращение ddэлементов и dtэлементов как что-то вроде flex: 1 1 50%и displayкак display: inline-block. Но я этого не проверял, поэтому подходите осторожно.

Тайлер Кромптон
источник
6

Скриншот jsFiddle

Посмотреть демо jsFiddle

Мне нужен был список, точно такой же, как описанный для проекта, который показал сотрудников компании, с их фотографией слева и информацией справа. Мне удалось выполнить очистку с помощью psuedo-элементов после каждого DD:

.myList dd:after {
  content: '';
  display: table;
  clear: both;
}

Кроме того, я хотел, чтобы текст отображался только справа от изображения, без переноса под плавающее изображение (эффект псевдостолбца). Это может быть достигнуто путем добавления DIVэлемента с CSS overflow: hidden;вокруг содержимого DDтега. Вы можете опустить это дополнительное DIV, но содержимое DDтега будет перенесено в плавающее DT.

Поработав с ним некоторое время, я смог поддерживать несколько DTэлементов DD, но не несколько DDэлементов DT. Я попробовал , добавив еще один необязательный класс , чтобы очистить только после того , как последний DD, но последующие DDэлементы завернуты под DTэлементами (не мой желаемого эффекта ... Я хотел DTи DDэлементы для формирования столбцов, а также дополнительные DDэлементы были слишком широки).

По всем правилам, это должно работать только в IE8 +, но из-за причуд в IE7 оно работает и там.

thirdender
источник
Легко один из лучших ответов здесь.
Майкл Алерс
5

Вот еще один вариант, который работает, отображая dt и dd inline, а затем добавляя разрыв строки после dd.

dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}

Это похоже на решение Navaneeth, описанное выше, но при таком подходе содержимое не будет выстраиваться в линию, как в таблице, но dd будет следовать за dt сразу в каждой строке независимо от длины.

Эндрю Даунс
источник
5

Мне нужно сделать это, чтобы <dt>содержимое было отцентрировано вертикально относительно <dd>содержимого. Я использовал display: inline-blockвместе сvertical-align: middle

Смотрите полный пример на Codepen здесь

.dl-horizontal {
  font-size: 0;
  text-align: center;

  dt, dd {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    width: calc(50% - 10px);
  }

  dt {
    text-align: right;
    padding-right: 10px;
  }

  dd {
    font-size: 18px;
    text-align: left;
    padding-left: 10px;
  } 
}
Astrotim
источник
3

В зависимости от стиля элементов dt и dd вы можете столкнуться с проблемой: заставить их иметь одинаковую высоту. Например, если вы хотите видеть какую-либо видимую границу внизу этих элементов, вы, скорее всего, захотите отобразить границу на той же высоте, как в таблице.

Одним из решений этого является мошенничество и превращение каждой строки в элемент «dl». (это эквивалентно использованию tr в таблице) Мы теряем первоначальный интерес к спискам определений, но, напротив, это простой способ получить псевдотаблицы, которые быстро и красиво оформлены.

CSS:

dl {
 margin:0;
 padding:0;
 clear:both;
 overflow:hidden;
}
dt {
 margin:0;
 padding:0;
 float:left;
 width:28%;
 list-style-type:bullet;
}
dd {
 margin:0;
 padding:0;
 float:right;
 width:72%;
}

.huitCinqPts dl dt, .huitCinqPts dl dd {font-size:11.3px;}
.bord_inf_gc dl {padding-top:0.23em;padding-bottom:0.5em;border-bottom:1px solid #aaa;}

HTML:

<div class="huitCinqPts bord_inf_gc">
  <dl><dt>Term1</dt><dd>Definition1</dd></dl>
  <dl><dt>Term2</dt><dd>Definition2</dd></dl>
</div>
enthusiastic123
источник
1
Ты не пишешь quatreVingtCinqPts? :)
nicodemus13
2

Я нашел решение, которое кажется мне идеальным, но для этого нужны дополнительные <div>теги. Получается, что <table>для выравнивания не нужно использовать тег, как в таблице, достаточно использовать display:table-row;и display:table-cell;стили:

<style type="text/css">
dl > div {
  display: table-row;
}
dl > div > dt {
  display: table-cell;
  background: #ff0;
}
dl > div > dd {
  display: table-cell;
  padding-left: 1em;
  background: #0ff;
}
</style>

<dl>
  <div>
    <dt>Mercury</dt>
    <dd>Mercury (0.4 AU from the Sun) is the closest planet to the Sun and the smallest planet.</dd>
  </div>
  <div>
    <dt>Venus</dt>
    <dd>Venus (0.7 AU) is close in size to Earth, (0.815 Earth masses) and like Earth, has a thick silicate mantle around an iron core.</dd>
  </div>
  <div>
    <dt>Earth</dt>
    <dd>Earth (1 AU) is the largest and densest of the inner planets, the only one known to have current geological activity.</dd>
  </div>
</dl>
Алексей
источник
Почему он не соответствует XHTML?
Дерик Шунби
8
@DerickSchoonbee - потому что dls могут иметь только dts и dds как дети. dtВ качестве дочерних элементов могут быть только встроенные элементы. dds, по некоторым причинам, может иметь элементы уровня блока как дочерние элементы.
Энтони
6
-1 Недействительный HTML 4, XHTML 1 или HTML 5. По сути, вы просто хотите DIэлемент, как и я . Но с любым таким элементом вам вообще не нужны такие эзотерические вещи, как таблицы CSS ... Во всяком случае, этого элемента не существует, и поэтому вы не должны его использовать.
Андреас Рейбранд
@AndreasRejbrand Элемент DI также недопустим в HTML5
AlexMorley-Finch
@ AlexMorley-Finch: я знаю. Вот почему я сказал, что хочу такой элемент (DI из XHTML 2.0). Кстати, Ян Хиксон, редактор WHATWG HTML 5, дал мне понять, что значение run-inCSS display- это именно то, что я хочу (в моем случае я хочу простые списки метаданных значения имени).
Андреас Рейбранд
2

Я недавно нужно смешивать встроенные и не рядный дт / дд пар, указав класс dl-inlineна <dt>элементах , которые должны быть затем встроенными <dd>элементами.

dt.dl-inline {
  display: inline;
}
dt.dl-inline:before {
  content:"";
  display:block;
}
dt.dl-inline + dd {
  display: inline;
  margin-left: 0.5em;
  clear:right;
}
<dl>
    <dt>The first term.</dt>
    <dd>Definition of the first term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The second term.</dt>
    <dd>Definition of the second term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt class="dl-inline">The third term.</dt>
    <dd>Definition of the third term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
    <dt>The fourth term</dt>
    <dd>Definition of the fourth term. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a placerat odio viverra fusce.</dd>
</dl

>

Майк Годин
источник
1

Это работает на IE7 +, соответствует стандартам и допускает различную высоту.

<style>
dt {
    float: left;
    clear: left;
    width: 100px;        
    padding: 5px 0;
    margin:0;
}
dd {
    float: left;
    width: 200px;
    padding: 5px 0;
    margin:0;
}
.cf:after {
    content:'';
    display:table;
    clear:both;
}
</style>

<dl class="cf">
    <dt>A</dt>
    <dd>Apple</dd>
    <dt>B</dt>
    <dd>Banana<br>Bread<br>Bun</dd>
    <dt>C</dt>
    <dd>Cinnamon</dd>
</dl>        

Смотрите JSFiddle .

Джастин
источник
1

это работает, чтобы отобразить их в виде таблицы с рамкой, она должна соответствовать 3em ширине первого столбца. Перенос слов просто разбивает любые слова шире столбца

 dl { display:block;
      border:2px solid black;
      margin: 1em;}  
 dt { display:inline-block;
      width:3em;
      word-wrap:break-word;} 
 dd { margin-left:0;
      display:inline;
      vertical-align:top;
      line-height:1.3;} 
 dd:after { content:'';display:block; } 

Сравнение <table>с <dl>:

<!DOCTYPE html>
<html>
<style>

dl { display:block;border:2px outset black;margin:1em; line-height:18px;}  
dt { display:inline-block;width:3em; word-wrap:break-word;} 

dd { margin-left:0; display:inline; vertical-align:top; line-height:1.3;} 
dd:after { content:'';display:block; } 


.glosstable { border:2px outset #aaaaaa;margin:1em; text-align:left}  
.glosstable, table, tbody,  tr,  td, dl, dt {font-size:100%; line-height:18px;}

.glossaz { font-size:140%;padding-left:2em;font-weight:bold;color: #00838c; } 
td.first {width: 2.5em;} 
</style>
<body>
Table<br>
<table class="glosstable">
  <tr><td class="first">Milk</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td class="first">Coffee2</td>
  <td class="glossdata">Black hot drink</td>
</tr>
  <tr><td>Warm milk</td>
  <td class="glossdata">White hot drink</td>
</tr>
</table>
DL list <br>
<dl class="glosstablep">
  <dt>Milk</dt>
  <dd class="glossdata">White cold drink</dd>
  <dt>Coffee2</dt>
  <dd class="glossdata">Black cold drink</dd>
  <dt>Warm Milk</dt>
  <dd class="glossdata">White hot drink</dd>
</dl>

</body>
</html>

робкий
источник
0

Обычно при оформлении списков определений в виде таблиц я начинаю со следующего:

dt,
dd{
    /* Override browser defaults */
    display: inline;
    margin: 0;
}

dt  {
    clear:left;
    float:left;
    line-height:1; /* Adjust this value as you see fit */
    width:33%; /* 1/3 the width of the parent. Adjust this value as you see fit */
}

dd {
    clear:right;
    float: right;
    line-height:1; /* Adjust this value as you see fit */
    width:67%; /* 2/3 the width of the parent. Adjust this value as you see fit */
}
pinky00106
источник
-8

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

Вот как я это делаю:

Код вашей таблицы стилей:

<style>
    dt {
        float:left;
    }
    dd {
        border-left:2px dotted #aaa;
        padding-left: 1em;
        margin: .5em;
    }   
</style>

Ваш HTML-код:

<dl>
    <dt>1st Entity</dt>
    <dd style="margin-left: 5em;">Consumer</dd>
    <dt>2nd Entity</dt>
    <dd style="margin-left: 5em;">Merchant</dd>
    <dt>3rd Entity</dt>
    <dd style="margin-left: 5em;">Provider, or cToken direct to Merchant</dd>
    <dt>4th Entity</dt>
    <dd style="margin-left: 5em;">cToken to Provider</dd>
</dl>

Выглядит так

RoboTamer
источник
1
Я бы посоветовал не повторять поле margin-left, когда его можно переместить в таблицу стилей - они предназначены для предотвращения дублирования кода. Раздражению таблиц стилей можно противостоять с последовательным дизайном; но даже тогда - если предотвращение вздутия означает сохранение сетевого трафика, оно все равно сохраняется, помещая его в таблицу стилей вместо HTML.
Иридайн
2
-1 прости. Не используйте встроенные стили, если у вас действительно ДЕЙСТВИТЕЛЬНО нет другого выбора, в противном случае вы получите действительно грязную HTML-разметку для начала.
MEM
Я думаю, что это анти-шаблон.
Денис Иванов