Почему display: inline не работает

Question

Почему то в моем браузере ( Opera ) display: inline абсолютно никак не работает и div-ы просто занимают всю строку

body {
  position: relative;
  font-family: 'Noto Sans', sans-serif;
  font-size: 3em;
  line-height: 1.4;
  color: #000;
  /*min-width: 320px;
    overflow-x: hidden;
    height: auto;*/
}

.just {
  display: inline;
}

.inline {
  border: 2px solid rgb(255, 0, 0);
  padding: 10px;
  font-size: 1em;
  list-style-type: none;
}

<body>
  <div class="main">
    <ul class="just">
      <li class="inline">Новости</li>
      <li class="inline">Ураганы</li>
      <li class="inline">Холдинги</li>
    </ul>
  </div>
</body>

Answer 1

потому что применить нужно к li

body {
  position: relative;
  font-family: 'Noto Sans', sans-serif;
  font-size: 1em;
  line-height: 1.4;
  color: #000;
  /*min-width: 320px;
    overflow-x: hidden;
    height: auto;*/
}

.just {
  display: inline;
}

.inline {
  border: 2px solid rgb(255, 0, 0);
  padding: 10px;
  font-size: 1em;
  list-style-type: none;
  display: inline;
}

   <div class="main">
    <ul class="just">
      <li class="inline">Новости</li>
      <li class="inline">Ураганы</li>
      <li class="inline">Холдинги</li>
    </ul>
  </div>

Answer 2

Внутри вашего элемента ul с display: inline находятся блочные элементы li, которые "распирают" строчный элемент изнутри до состояния блока. Это как в целлофановый пакетик положить кирпич. Пакетик примет габариты кирпича как минимум.

Если вам нужно выстроить элементы в одну строку, то задайте элементам li display: inline, как вам в соседнем комментарии посоветовали.

А если вам нужно чтобы весь ul был строчным, а li внутри него так и остались столбиком, то нужно задавать элементу ul свойство display: inline-block.

БЛОГ НА HUSL

Почему display: inline не работает

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