Question

当我尝试制作导航栏时，我希望它向右浮动，但是当我这样做时，

元素将在水平显示时垂直显示。

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  /*position: fixed;*/
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
}
#navigation a{
  text-align: center;
}

<header>
      <nav id="navigation">
        <ul>
          <li>
            <a href="./entry.html"><h3>Home</h3></a>
            <a href="#"><h3>About</h3></a>
            <a href="#"><h3>Timeline</h3></a>
            <a href="#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

Answer 1

您有一堆默认情况下会堆叠的块元素。因此，使li的a，h3全部显示：inline或inline-block。另外，为UL增加宽度，因为“浮动”会使它折叠到内容的宽度。

SET serveroutput ON
exec p5(10);
commit; -- to save the changes

#navigation ul{
  font-family: 'Roboto', sans-serif;
  float: right;
  overflow: hidden;
  line-height: 1px !important;
  width: 100%;
  text-align: right;
}
#navigation ul li h3 {
  font-weight: normal;
  font-size: 34px !important;
  color: #000;
  margin-right: auto;
  padding: 0;
  margin: auto;
  letter-spacing: 0.25px;
}
#navigation ul li {
  list-style: none;
  line-height: 40px !important;
  display:inline-block;
}
#navigation a{
  text-align: center;
}
#navigation a, #navigation h3 {
  display:inline;
}

而且，从标记的角度来看，这过于复杂。过去，将导航放入无序列表是使其具有语义的一种方法，但是HTML5的Nav元素可以为您做到这一点。更好的方法如下所示：

<header>
      <nav id="navigation">
        <ul>
          <li>
            <a href="./entry.html"><h3>Home</h3></a>
            <a href="#"><h3>About</h3></a>
            <a href="#"><h3>Timeline</h3></a>
            <a href="#"><h3>Video</h3></a>
          </li>
        </ul>
      </nav>
    </header>

nav {
  font-size: 14px;
  font-family: sans-serif;
  text-align: right;
}
nav a {
  margin-left: 10px;
  padding: 5px;
  display: inline-block;
}

Answer 2

尝试插入显示：内联；在元素上。

#navigation ul li h3 {
 font-weight: normal;
 font-size: 34px !important;
 color: #000;
 margin-right: auto;
 float:right;
 padding: 0;
 margin: auto;
 letter-spacing: 0.25px;
 display:inline;

}

Answer 3

li项的默认显示为list-item，其堆叠类似于block元素。如果将display: inline;添加到li元素中，并将display: inline-block;或display: inline;添加到li内的锚标记中，则应该水平显示菜单项。

Answer 4

您需要为这些项目创建单独的行。将HTML更改为此

NULL

并将其添加到您的CSS

<header>
    <nav id="navigation">
        <ul>
            <li class="menuItem">
                <a href="./entry.html">
                    <h3>Home</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>About</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>Timeline</h3>
                </a>
            </li>
            <li class="menuItem">
                <a href="#">
                    <h3>Video</h3>
                </a>
            </li>
        </ul>
    </nav>
</header>

您可以根据自己的喜好更改填充

您将如何修复显示为列表的导航栏？

4 个答案: