Расположить элементы футера в строку

<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 по-прежнему располагаются друг под другом вот так:

enter image description here


Ответы (3 шт):

Автор решения: Краева Екатерина
  .footer{
       display: flex;
       flex-direction: column;
  }

Чтобы задать расположение элементов внутри контейнера, нужно задать некоторые свойства самому контейнеру. Воспользуемся flexbox.

→ Ссылка
Автор решения: ksa

Я хочу, чтобы элементы, в значении класса которых присутствует 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>

→ Ссылка