Как отобразить li inline в навигационной панели

Question

Я довольно новичок в HTML / CSS.

Я хочу отобразить li во встроенной навигации, но это не сработает.

Здесь, в моем коде. Что я делаю не так?

#nav_bar .nav_button {
  display:inline;
}

<ul id="nav_bar">
      <li><a href="#">How we work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Account</a></li>
      <li><a href="#">View plans</a></li>
    </ul>

Answer 1

Стиль

inline необходимо применить к элементу li.

#nav_bar li {
  display:inline;
}

<ul id="nav_bar">
    <li><a href="#">How we work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Account</a></li>
    <li><a href="#">View plans</a></li>
</ul>

Answer 2

Вы дали inline классу .nav_button, но никогда не использовали его. Добавьте класс, где вы хотите его использовать.

#nav_bar .nav_button {
  display:inline;
}

<ul id="nav_bar">
      <li class="nav_button"><a href="#">How we work</a></li>
      <li class="nav_button"><a href="#">Blog</a></li>
      <li class="nav_button"><a href="#">Account</a></li>
      <li class="nav_button"><a href="#">View plans</a></li>
    </ul>