Как сделать так, чтобы каждый из этих элементов переносился на новые строки, но сохраняя их в виде display = inline и без тегов br ?
<div> <a href="element1">Element 1</a> <a href="element1">Element 2</a> <a href="element1">Element 3</a> </div>
Это можно сделать, но не будет работать для всех браузеров. Вам необходимо использовать псевдоэлемент :after с white-space и content. Вот так
: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
Теперь это можно надежно реализовать с помощью сетки CSS
div { display: grid; grid-template-columns: 100%; } div a { grid-column-start: 1; }
Чтобы элемент блока не занимал всю строку, установите его ширину на что-то маленькое и white-space:nowrap
white-space:nowrap
label { width:10px; display:block; white-space:nowrap; }
вы можете сделать это, определив равным width для родителя <div> и <a>. при условии, что вы применяете класс 'container' к <div>
width
<div>
<a>
.container { width: 100px; } a { width: 100px; display: inline; }
<style type="text/css"> div.probablyShouldPutAClassName a { display: block; } </style>
Поместить их в неупорядоченный список?
Не уверен, что я действительно понимаю, что вы ищете здесь *