Question

所以我今天花了很多时间来处理代码，尝试不同的风格和诸如此类的东西。现在我已经尝试改变它以使由链接组成的导航栏变为水平，但无论我尝试什么，链接都是垂直的*。不能为我的生活弄清楚什么是错的。

我想要实现的目标是将主页，食物，动物和动词的链接保留在原来的位置，并使字母表链接显示在它所说的“＃34; Home＆＃34;”旁边的页面上。

CSS

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

和

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

Answer 2

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

ul > li {
    display: inline;
}

导航栏由链接而非水平

2 个答案: