CSS: вызывать разрывы строк для встроенных элементов без <br/">

Как я могу использовать каждый из этих элементов для новых строк, но сохраняя их как display = inline и без br тегов?

<div>
   <a href="element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>

Ответ 1

вы можете сделать это, указав равный width для родительского <div> и <a>. если вы примените контейнер класса к <div>

.container { width: 100px; }
a { width: 100px; display: inline; }

Ответ 2

Это можно сделать, но не будет работать для всех браузеров. Вы должны использовать псевдоэлемент :after с white-space и content. Таким образом

<html>
<head>
<style type="text/css">
    div a:after {white-space: pre;content:'\A';}
</style>
</head>
<body>
<div>
   <a href="element1">Element 1</a>
   <a href="element1">Element 2</a>
   <a href="element1">Element 3</a>
</div>
</body>
</html>

Ссылка: http://www.w3.org/TR/CSS2/generate.html#content

Ответ 3

Теперь это можно надежно реализовать с помощью CSS-сетки.

div {
  display: grid;
  grid-template-columns: 100%;
}

div a {
  grid-column-start: 1;
}

Ответ 4

Для элемента блока не занимать всю строку, установите его ширину на что-то маленькое, а white-space:nowrap

label
{
    width:10px;
    display:block;
    white-space:nowrap;
}

Ответ 5

<style type="text/css">
  div.probablyShouldPutAClassName a {
    display: block;
  }
</style>

Ответ 6

Поместите их в неупорядоченный список?

Не уверен, что я действительно понимаю, что вы здесь...