-1

Самое странное, что после указания display: flex; они отображаются столбиком. Кто-нибудь знает как это исправить? код html:

<div class="header">
    <a href="">12</a>
    <a href="">12</a>
    <a href="">21</a>
</div>

код css :

body, html{
   margin: 0;
   padding: 0;
   background-color: white;
}

.content {
   width: 80%;
   margin: 0 auto;
   background: lightblue;
   height: 100%;
}
3
  • Может это из-за open server'а?
    – DNRAWW
    12 июн 2018 в 9:48
  • Где вообще стили для ссылок, почему они должны располагаться как-то иначе? Кому вы поставили display: flex? 12 июн 2018 в 10:01
  • Для ссылок нету стилей, поэтому я и спрашиваю, ссылки должны отображаться столбиком, разве нет ?
    – DNRAWW
    12 июн 2018 в 10:05

2 ответа 2

1

Тег a является строчным элементом, поэтому по умолчанию он будет в строку отображаться, вот здесь можно посмотреть все строчные элементы.

Если вам нужно изменить стиль отображения, Вы уже сами ответили на вопрос, нужно поменять свойство display

1

Потому что <a> это строчный элемент.

Когда ты им указываешь display: flex; Они становятся блоками, а блоки как известно занимают всю строк, по этому каждый на своей строке.

Используй dislpay: flex; flex-direction: row; (Для строки) или dislpay: flex; flex-direction: column; (Для для колонки)

Данный атрибут необходимо указывать родителю (.header), а не дочерним элементам (а).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.