Сделайте тег <a>на новую строку, не используя "display: block"

Я хотел бы, чтобы ссылки на эту страницу отображались в каждой строке:

а. Без использования "display:block" - так как анимация зависания занимает всю ширину контейнера, а не только элемент <a>.

В. Без использования тегов <br>, поскольку в конечном итоге я хочу создать отзывчивый сайт с горизонтальной навигацией на меньших экранах.

Спасибо за вашу помощь.

Ответ 1

Вы пробовали float:left; clear:left?

Ответ 2

оберните навигацию по ul, li:

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>

CSS

ul {list-style: none} li {display: block}

Это позволяет вам соответственно привязать якоря, заставляя их сломать линии.

Ответ 3

Вы можете обернуть <a> в <div> и применить CSS к div к float:left, clear:left;

div.anchorContainer
{
    float:left;
    clear:left;
}

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>

<div class="anchorContainer">
    <a href="#">text</a>
</div>