Question

我正在尝试对齐导航栏右侧的ul，但是它在右侧太远而且我的列表项目堆叠了。知道为什么以及如何解决这个问题？我做了一个Codepen来展示正在发生的事情。

这是我的html：

<nav id="navbar">
  <div id="navbar-container">
    <h1><a href="#">MOTEL CAMPO</a></h1>
    <ul id="main-nav">
      <li><a href="#">Programme</a></li>
      <li><a href="#">Archives</a></li>
      <li><a href="#">Infos</a></li>
      <li><a href="#">Newsletter</a></li>
    </ul>
  </div>
</nav>

和css：

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "l10medium", Helvetica, Verdana, sans-serif;
}

nav {
  width: 100%;
  height: 50px;
}

nav #navbar-container {
  width: auto;
  height: 50px;
  padding: 0 100px;
  background-color: white;
}

nav h1 {
  display: inline-block;
  float: left;
  height: 30px;
  margin: 0;
  padding: 10px 0;
  font-size: 1.5em;
}

ul#main-nav {
  float: right;
  height: 50px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul#main-nav li {
  width: auto;
  height: 30px;
  padding: 10px 0.5em;
  display: inline;
}

ul#main-nav li a {
  display: block;
  line-height: 30px;
  vertical-align: middle;
  font-size: 1.3em;
}

另外，如果您对我的HTML语义和CSS有任何建议，我很乐意接受它。

Answer 1

将CSS更改为：

ul#main-nav li {
  width: auto;
  height: 30px;
  padding: 10px 0.5em;
  display: inline-block;
}

由于您将h1定义为display: inline-block而li定义为display: inline，因此您获得了垂直结果。只需将其更改为display: inline-block即可。 注意：这会使您的列表保持您指定的顺序。

Answer 2

尝试使用float li个元素（float不需要使用display: inline），而不是整个ul。

ul#main-nav li {
   width: auto;
   height: 30px;
   padding: 10px 0.5em;
   float: right;
}

CodeOpen

Answer 3

我用过这个

margin-left: -2em;

它驯服了这个问题。

对齐导航栏右侧的ul，奇怪的行为

3 个答案: