Я хочу сделать каждый из этих элементов другой строкой, не используя <br /> в HTML, <h1> является блочным элементом, но мне нужно исправить его width. Как сделать якорь под <h1> не рядом?
<h1 id="viewerTitle">Header </h1>
<a href="#" class="view-options">View options</a>
<a href="#" class="view-options">View options</a>
Вот пример: http://jsfiddle.net/mmhhd/
Начните с удаления float: left с h1.
Затем добавьте правило:
a.view-options {
display: block;
}
Альтернативный способ:
Удалите float:left; в h1 и display: inline-block; в a.view-options
Затем добавьте
h1:after, a:after {
content:"\a";
white-space: pre;
}
Использовать CSS:
a {
display: block;
}
По умолчанию тег a является встроенным элементом, поэтому вам нужно изменить его свойство отображения.
Из спецификации CSS:
Элементы уровня блока - это те элементы исходного документа, которые визуально отформатированы как блоки (например, параграфы). Следующие значения свойства display отображают элемент block-level: "block", "list-item" и "table".
http://www.w3.org/TR/CSS2/visuren.html#block-boxes
Элементы на уровне строки - это те элементы исходного документа, которые не формировать новые блоки контента; контент распределяется по строкам (например, подчеркнутые фрагменты текста в абзаце, встроенные изображения, и т.д.). Следующие значения свойства display отображают элемент inline-level: 'inline', 'inline-table' и 'inline-block'. Элементы на уровне строки генерируют ящики на уровне строки, которые являются ящиками которые участвуют в встроенном контексте форматирования.
Используйте CSS для создания блоков тегов привязки:
a.view-options { display: block; }
Сделайте также элементы блока привязки.
Возьмите float с тега h1 и создайте отображение тегов: display: block;
Это способ, который работает для меня.
p.autonewline {white-space: pre-line;}