CSS. Как поставить список в одну строку?

Question

Вроде поставил float: left; но список не выравнивается по левому краю и не встает в одну линию

* {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #EABCBC;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}

.complex_list {
  background-color: #76DBE4;
}

.complex_list ul li {
  float: left;
}

.complex_list li {
  font: 0.75em arial;
  list-style: none;
}

.complex_list li a {
  text-decoration: none;
  color: #FF8604;
}

.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}

<div class="header">

  <h1>Стройка</h1>

  <ul class="complex_list">
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>

Answer 1

.complex_list ul li — Это значит "все li внутри ul, который внутри complex_list". Селектор неправильный, должен быть ul.complex_list li — "все li внутри ul с классом complex_list" и заработает.

Но float: left предназначен для обтекания текста, а не для позиционирования.
Пробуйте ul.complex_list { display: flex; }:

* {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #169;
  color: white;
  text-align: center;
  height: auto;
  font: 1.6em arial;
  padding: auto;
}

.complex_list {
  background-color: #2bd;
  padding: 4px;
}

ul.complex_list {
  display: flex;
}

.complex_list li {
  font: 0.75em arial;
  list-style: none;
}

.complex_list li a {
  text-decoration: none;
  margin: 2px;
  color: #fff;
}

.complex_list li a:hover {
  text-decoration: underline;
  color: blue;
}

<div class="header">

  <h1>Стройка</h1>

  <ul class="complex_list">
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
    <li><a href="#">Cтройка</a></li>
  </ul>
  
</div>

Answer 2

у вас ошибка в селекторе .complex_list ul li вы пытаетесь применить стили к несуществующему элементу, селектор должен быть такого вида

.complex_list li {
    float: left;
}

хотя для этой задачи лучше использовать

.complex_list li{
    display: inline-block;
}

либо такой вариант

.complex_list {
    display: flex;
}

БЛОГ НА HUSL

CSS. Как поставить список в одну строку?

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