Справка по макету CSS - Многострочный адрес
Я пытаюсь отобразить адрес, выровненный по правому краю, в нижнем колонтитуле моей страницы следующим образом:
1234 south east Main St.
Nowhere, ID 45445
(555) 555-5555
в моей разметке у меня есть это:
<address> 1234 south east Main St. Nowhere, Id 45445 (555) 555-5555 </address>
Как я могу правильно настроить макет, не вставляя <br /> в каждую строку с помощью css?
В идеале лучше разметить его микроформатом adr. Google 'hCard' для спецификации. Также элемент <address> предназначен для разметки контактной информации / URL-адреса автора страницы, а не адресов (как бы запутанно это ни звучало).
@sanchothefat - эти теги считаются частью строгого XHTML?
Ответы 3
Эй, попробуй использовать это, используй это
.address
{
white-space:pre;
text-align:right;
}
Это работает. Благодарю. Единственная проблема в том, что в разметке меня заставляют размещать текст определенным образом.
@micah, вы не используете отдельную таблицу стилей?
Да, конечно. Я говорю о том, что использование «white-space: pre» заставляет меня использовать разметку в определенном формате, чтобы она работала.
@micah Имейте в виду, что тег <address> предназначен для использования только для отображения контактной информации для данной страницы. Вы не должны использовать его для других адресов. см .: w3.org/TR/html401/struct/global.html#h-7.5.6. Если вы не пытаетесь отобразить контактную информацию для страницы, но все же хотите какой-то стандартный способ отображения адреса, взгляните на microformats.org. В частности, hcard может быть тем, что вам нужно. Также см. stackoverflow.com/questions/4342457/…
Вам нужно будет добавить туда дополнительные элементы, либо <br>, как вы предлагаете, либо что-то вроде:
<address>
<div class = "street">1234 south east Main St.</div>
<div class = "state">Nowhere, Id 45445</div>
<div class = "telnum">(555) 555-5555</div>
</address>
Во-первых, в этом случае рекомендуется присвоить адресу идентификатор. Конечно, если вы больше не используете другой адрес, в этом нет необходимости. Потом:
address#company_address
{
white-space: pre;
text-align: right;
}
Вашему CSS нужно больше Cowbell ...