CSS & HTML：菜单栏 <a> 和 <li> 标签不在一行

Question

我正在尝试制作一个分为三列的菜单栏，其中左侧和右侧是链接 HOME 和 SEARCH，但在菜单的中心部分有几个嵌套在列表中的链接.列显示得很好，但出于某种神秘原因，HOME 和 SEARCH 链接显示得比中心内容高。我也尝试将链接 HOME 和 SEARCH 嵌套在列表中，但是菜单栏中的所有内容都向右偏移了一点，我希望它是对称的，如果可能的话不使用填充或边距。

这可能是非常简单的事情，绝对是我的错，但我希望如此。

所以问题是如何禁用向右偏移或如何使所有内容都在一条线上而不使用我认为不必要的那些 <li>?

nav {
  padding-left: 3em;
  padding-right: 3em;
  overflow: hidden;
}

nav div {
  display: inline;
}

.area-center .menu li {
  display: inline;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: none;
}

.menu ul {
  list-style: none;
  padding-left: 0;
}

.menu li {
  list-style: none;
  padding-left: 0;
}

.menu a {
  text-decoration: none;
}

.area-right {
  float: left;
  width: 20%;
  text-align: right;
}

.area-center {
  float: left;
  width: 60%;
  text-align: center;
}

.area-left {
  float: left;
  width: 20%;
  text-align: left;
}

<div id="menu_bar">
  <nav id="main-menu" class="section">
    <div class="area-left">
      <a class="order">Home</a>
    </div>
    <div class="area-center">
      <ul class="menu">
        <li class="order"><a class="order">a</a></li>
        <li class="order"><a class="order">b</a></li>
        <li class="order"><a class="order">c</a></li>
        <li class="order"><a class="order">d</a></li>
      </ul>
    </div>
    <div class="area-right">
      <a class="order">SEARCH</a>
    </div>
  </nav>
</div>

Answer 1

如果您没有指定，浏览器会将默认边距设置为 <ul> 个元素。你可以在下图中看到这个

您必须将 margin:0 设置为您的 <ul>

堆栈片段

nav {
  padding-left: 3em;
  padding-right: 3em;
  overflow: hidden;
}

nav div {
  display: inline;
}

.area-center .menu li {
  display: inline;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: none;
}

.menu ul {
  list-style: none;
  padding-left: 0;
}

.menu li {
  list-style: none;
  padding-left: 0;
}

.menu a {
  text-decoration: none;
}

.area-right {
  float: left;
  width: 20%;
  text-align: right;
}

.area-center {
  float: left;
  width: 60%;
  text-align: center;
}

.area-left {
  float: left;
  width: 20%;
  text-align: left;
}

ul {
  margin: 0;
}

<div id="menu_bar">
  <nav id="main-menu" class="section">
    <div class="area-left">
      <a class="order">Home</a>
    </div>
    <div class="area-center">
      <ul class="menu">
        <li class="order"><a class="order">a</a></li>
        <li class="order"><a class="order">b</a></li>
        <li class="order"><a class="order">c</a></li>
        <li class="order"><a class="order">d</a></li>
      </ul>
    </div>
    <div class="area-right">
      <a class="order">SEARCH</a>
    </div>
  </nav>
</div>

Answer 2

您可以通过将 line-height 添加到 area-left & area-right[=23] 来修复它=]，也许这不是最好的方法，你可以找到更好的方法

nav{ padding-left: 3em; padding-right: 3em; overflow:hidden; } nav div{ display:inline; } .area-center .menu li{ display:inline; padding-right: 1em; padding-left: 1em; padding-top:none; } .menu ul{ list-style:none; padding-left:0; } .menu li{ list-style:none; padding-left:0; } .menu a{ text-decoration: none; } .area-right{ float: left; width: 20%; line-height:45px; text-align: right; } .area-center{ float: left; width: 60%; text-align: center; } .area-left{ float: left; width: 20%; line-height:45px; text-align: left; }

<div id="menu_bar"> <nav id="main-menu" class="section"> <div class="area-left"> <a class="order">Home</a> </div> <div class="area-center"> <ul class="menu"> <li class="order"><a class="order">a</a></li> <li class="order"><a class="order">b</a></li> <li class="order"><a class="order">c</a></li> <li class="order"><a class="order">d</a></li> </ul> </div> <div class="area-right"> <a class="order">SEARCH</a> </div> </nav> </div>

Answer 3

您的 CSS 有误。 .menu ul 不存在。

将选择器更新为简单的 .menu，并删除浏览器应用于 ul 的默认 margin。

nav {
  padding-left: 3em;
  padding-right: 3em;
  overflow: hidden;
}

nav div {
  display: inline;
}

.area-center .menu li {
  display: inline;
  padding-right: 1em;
  padding-left: 1em;
  padding-top: none;
}


/* this is incorrect
.menu ul {
  list-style: none;
  padding-left: 0;
}*/

.menu {
  margin: 0;
  padding: 0;
}

.menu li {
  list-style: none;
  padding-left: 0;
}

.menu a {
  text-decoration: none;
}

.area-right {
  float: left;
  width: 20%;
  text-align: right;
}

.area-center {
  float: left;
  width: 60%;
  text-align: center;
}

.area-left {
  float: left;
  width: 20%;
  text-align: left;
}

<div id="menu_bar">
  <nav id="main-menu" class="section">
    <div class="area-left">
      <a class="order">Home</a>
    </div>
    <div class="area-center">
      <ul class="menu">
        <li class="order"><a class="order">a</a></li>
        <li class="order"><a class="order">b</a></li>
        <li class="order"><a class="order">c</a></li>
        <li class="order"><a class="order">d</a></li>
      </ul>
    </div>
    <div class="area-right">
      <a class="order">SEARCH</a>
    </div>
  </nav>
</div>

CSS & HTML：菜单栏 <a> 和 <li> 标签不在一行

CSS & HTML: Menu-Bar <a> and <li> tags not in line

html

css

nav