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

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

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

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

CodeOpen

Answer 2

将您的 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 3

我用过这个

margin-left: -2em;

它解决了这个问题。

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

Aligning ul at the right of navbar, strange behaviour

html

css

alignment