Расположить элементы футера в строку
<footer class ="footer" data-testid="footer">
<span class="todo-count footer_element">0 items left</span>
<ul class="filters footer_element" data-testid="footer-navigation">
<li>
<button class="tabs footer_element">All</a>
</li>
<li>
<button class="tabs footer_element">Active</a>
</li>
<li>
<button class="tabs footer_element">Completed</a>
</li>
</ul>
<button class="clear-completed footer_element" disabled>Clear completed</button>
</footer>
У меня есть следующий код, в котором есть тег footer. Я хочу, чтобы элементы, в значении класса которых присутствует footer_element, располагались в одну строку.
Я пыталась задать стиль для каждого элемента footer - для этого я пишу:
.footer_element {
display: inline;
}
, но, к сожалению, кнопки all, active, completed, clear completed и строка 0 items left по-прежнему располагаются друг под другом вот так:
Ответы (3 шт):
.footer{
display: flex;
flex-direction: column;
}
Чтобы задать расположение элементов внутри контейнера, нужно задать некоторые свойства самому контейнеру. Воспользуемся flexbox.
Я хочу, чтобы элементы, в значении класса которых присутствует footer_element, располагались в одну строку.
Предложу такой вариант...
footer,
footer > ul {
display: flex;
gap: 10px;
}
footer * {
margin: 0;
}
footer > ul {
list-style-type: none;
padding-left: 0;
}
<footer class="footer" data-testid="footer">
<span class="todo-count footer_element">0 items left</span>
<ul class="filters footer_element" data-testid="footer-navigation">
<li>
<button class="tabs footer_element">All</button>
</li>
<li>
<button class="tabs footer_element">Active</button>
</li>
<li>
<button class="tabs footer_element">Completed</button>
</li>
</ul>
<button class="clear-completed footer_element" disabled>Clear completed</button>
</footer>
display: flex используется для ровного построения дочерних элементов по горизонтали или вертикали.
В данном случае у нас в footer 3 элемента - todo-count, ul и clear-completed и они встали все в ряд, когда мы задали flex их родителю(footer).
Далее мы смотри что внутри ul есть 3 элемента, которые мы также хотим расположить горизонтально и следовательно задаём их родителю также flex, что бы дочерние элементы li встали в ряд. Надеюсь тут понятно, что не footer_element являются дочерними элементами ul, а именно li, которые встали горизонтально.
footer {
display: flex;
gap: 10px;
align-items: center;
margin-top: 50px;
flex-wrap: wrap;
}
.filters {
display: flex;
gap: 5px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
background-color: blue;
padding: 3px 15px;
}
<footer class ="footer" data-testid="footer">
<div class="todo-count footer_element">0 items left</div>
<ul class="filters footer_element" data-testid="footer-navigation">
<li>
<a href="" class="tabs footer_element">All</a>
</li>
<li>
<a href="" class="tabs footer_element">Active</a>
</li>
<li>
<a href="" class="tabs footer_element">Completed</a>
</li>
</ul>
<button class="clear-completed footer_element" disabled>Clear completed</button>
</footer>