由非水平链接组成的导航栏

Question

所以我今天一直在乱写代码，尝试不同的风格等等。现在我试图改变它，使一个由链接组成的导航栏变成水平的，但无论我尝试什么，链接都是垂直的*。无法为我的生活弄清楚出了什么问题。

我想要实现的目标是将 Home、Food、Animals 和 Verbs 等链接留在原处，并让字母表链接穿过页面上显示 "Home" 的位置。

CSS

body {
  margin: 0px;
  padding: 0px;
  background: ghostwhite;
}

header {
  padding: 0px 0px 0px 0px;
  margin-left: 55px;
  margin-top: 10px;
}

h1 {
  color: rosybrown;
  margin: 0px;
  padding: 5px;
  font-family: 'Indie Flower', cursive;
  font-size: 55px;
}


nav.navbar ul {
  list-style-type: none;
  margin-left: 60px;
  padding: 0px;
  border: 0px solid honeydew;
  width: 120px;
  border-radius: 5px;
}

a {
  font-family: 'Indie Flower', cursive;
  display: block;
  width: 80px;
  background: ghostwhite;
  text-align: center;
  text-decoration: none;
  font-size: 25px;
  color: cadetblue;
  padding: 20px;
  margin: 0px;
}

li.active a {
  color: black;
  background: ghostwhite;
  border: 1px solid cadetblue;
  border-radius: 5px;
}

a:hover {
  color: black;
  text-decoration: none;
}

nav.navbar {
  display: inline-block;
  vertical-align: top;
}

nav.alphabet {
  display: inline-block;
}

nav.alphabet ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

nav.alphabet li {
  display: inline;
}

nav.alphabet a {
  font-size: 15px;
  display: block;
  width: 60px;
  padding: 0px;
}

**HTML**

<!doctype html>
<html>
  <head>
    <title>Homepage</title>
    <link href="main.css" rel="stylesheet"/>
    <link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'>
  </head>

  <body>
    <header>
      <h1>Italian Glossary</h1>
    </header>

    <nav class="navbar">
      <ul>
        <li><a href="italianhomepage.html">Home</a></li>
        <li class="active"><a href="italianfood.html">Food</a></li>
        <li><a href="#">Animals</a></li>
        <li><a href="#">Verbs</a></li>
      </ul>
    </nav>

    <nav class="alphabet">
      <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
        <li><a href="#">E</a></li>
        <li><a href="#">F</a></li>
        <li><a href="#">G</a></li>
        <li><a href="#">H</a></li>
        <li><a href="#">I</a></li>
        <li><a href="#">J</a></li>
        <li><a href="#">K</a></li>
        <li><a href="#">L</a></li>
        <li><a href="#">M</a></li>
        <li><a href="#">N</a></li>
        <li><a href="#">O</a></li>
        <li><a href="#">P</a></li>
        <li><a href="#">Q</a></li>
        <li><a href="#">R</a></li>
        <li><a href="#">S</a></li>
        <li><a href="#">T</a></li>
        <li><a href="#">U</a></li>
        <li><a href="#">V</a></li>
        <li><a href="#">W</a></li>
        <li><a href="#">X</a></li>
        <li><a href="#">Y</a></li>
        <li><a href="#">Z</a></li>
      </ul>
    </nav>

  </body>

</html>

Answer 1

您需要使用 display: inline
http://jsfiddle.net/xme6xnL4/

ul > li {
    display: inline;
}

Answer 2

如果你想并排对齐两个导航，你可以将你的样式编辑为这些：

nav.navbar {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    float: left;
}

和

nav.alphabet {
    display: inline-block;
    width: 80%;
    float: right;
}

由非水平链接组成的导航栏

Navigation bar made of links not horizontal

html

css

navbar