如何在导航栏中显示 li 内联答案

【问题标题】：How to display li inline in the nav bar如何在导航栏中显示 li 内联
【发布时间】：2020-02-10 12:51:28
【问题描述】：

我对 HTML/CSS 很陌生。

我想在 nav 内联中显示 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>

【问题讨论】：

您的 CSS 正在尝试选择一个不在您的 HTML 中的类 nav_button。为每个<li> 尝试<li class="nav_button">。

标签： html css html-lists nav

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：