时间戳

首页 > 解决方案 > 您将如何修复显示为列表的导航栏？

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

问题描述

当我尝试制作导航栏时，我希望它向右浮动，但是当我希望它们水平显示时，<li> 元素垂直显示。

#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>

标签： htmlcss

解决方案

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

#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;

}

推荐阅读