Оформите список определений как простой набор значений ключа.

StackOverflow https://stackoverflow.com/questions/1577368

  •  21-09-2019
  •  | 
  •  

Вопрос

Я хотел бы использовать простой список определений:

<dl>
  <dt>name:</dt>
  <dd>Tomas</dd>

  <dt>address:</dt>
  <dd>this is a very long wrapping address</dd>

  <dt>age:<dt>
  <dd>29</dd>
<dl>

чтобы отобразить что-то вроде:

name: Tomas
address: this is a very long
wrapping address
age: 29

Список определений кажется здесь семантически лучшим вариантом.

Использование нового стиля отображения обкатки поможет:

<style> dt { display: run-in; } </style>

Но это пока не получило широкой поддержки.Как я могу стилизовать свой список определений для лучшей поддержки кросс-браузера (ie6 не требуется), не меняя HTML (в настоящее время я использую встроенное отображение и добавляю уродливые br)?

Изменить, чтобы уточнить: 

dt { clear: left; }
dd { float: left; }

не будет работать, потому что он будет отображаться как:

name: Tomas
address: this is a very long
         wrapping address
age: 29

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

Это было полезно?

Решение

Я думаю, это сработает:

dt {
  float: left;
  clear: left;
  margin: 0;
  padding: 0 .5em 0 0;
}
dd {
  margin: 0;
  padding: 0;
}

Еще один полезный вариант — это :after псевдокласс.Вы можете пропустить двоеточие в каждом из dt элементы и имеют:

dt:after {
  content: ":";
}

Это делает его более гибким, и вы можете изменить этого персонажа в списке и на веб-сайте в целом или избавиться от него, если захотите.

Чтобы решить упомянутую вами проблему упаковки, вам нужно установить ширину как для dt и dd элементы.Или используйте таблицу с th для имени/адреса и т. д. и td для «данных».IMO, таблица здесь является семантически приемлемым решением - она является табличные данные.

Другие советы

Вы можете просто разместить dd слева от предыдущего элемента, вот так.

dt { clear: left; }
dd { float: left; }

Вы также можете добавить атрибут ширины для дополнительного выравнивания.

dt { clear: left; width: 20%; }
dd { float: left; }

Ну, вы могли бы просто позволить dt плавать:левый

dt { float: left; }

или же пусть dt отображает встроенное:

dt { display: inline; }

Вам нужно удалить левое поле по умолчанию из файла dd.

dt {float:left;clear:left;margin-right:5px;}
dd {margin:0;}

Я думаю так (ракомментируйте первую строку, чтобы проверить небольшую ширину):

dl, dd, dt { margin: 0; }
/*dl { width: 80px; }*/
dl dt, dl dd { display: inline; }
dl dd:after { content: ' '; padding-left: 100%; }
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top