Question

我使用内联列表作为导航菜单，我希望超链接/列表项占据容器的整个高度，标签垂直位于容器的中心。这就是我所拥有的：

#top-nav-container {
  font-size: 14px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  background: #3498db;
}
#top-nav-container .nav-contents {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#top-nav-container .nav-left {
  width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
  margin-left: auto;
  text-align: right;
  width: 250px;
}
#top-nav-container .top-nav-logo {
  max-height: 35px;
  float: left;
}
#top-nav-container ul {
  margin: 0 0 0 30px;
  padding: 0;
  float: left;
  list-style: none;
  display: flex;
  /* Removes whitespace between li elements */
  flex-direction: row;
  align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
  text-decoration: none;
  background: red;
  border-right: 1px solid #fff;
  color: #fff;
  padding: 0 12px;
}

<header id="top-nav-container">

  <div class="container nav-contents">

    <div class="nav-left">
      <a href="#" title="Home">
        <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
      </a>
    </div>

    <div class="nav-mid">

      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>

    </div>

    <div class="nav-right">
      Stuff here...
    </div>

  </div>

</header>

非常感谢您对此提出的任何其他建议。

Answer 1

您需要为链接添加高度和行高，并确保它们是display: block或display: inline-block。请注意，inline-block将是首选：

#top-nav-container li a {
  height: 50px;
  line-height: 50px;
  display: inline-block;
}

请注意，在小屏幕上，由于当前宽度为250px，Stuff Here... div会被切断。只需将其调低至50px（或实际宽容量）：

#top-nav-container .nav-right {
    width: 50px;
}

我创建了一个显示此here的小提琴。

希望这有帮助！：）

Answer 2

您需要稍微修改CSS，请参阅以下代码段：

＆＃13;

#top-nav-container {
  font-size: 14px;
  width: 100%;
  height: 50px;
  overflow: hidden;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 500;
  background: #3498db;
}
#top-nav-container .nav-contents {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#top-nav-container .nav-left {
  width: 175px;
}
#top-nav-container .nav-mid {
  /* all below rules were added*/
  position: absolute;
  line-height: 50px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
}
#top-nav-container .nav-right {
  margin-left: auto;
  text-align: right;
  width: 250px;
}
#top-nav-container .top-nav-logo {
  max-height: 35px;
  float: left;
}
#top-nav-container ul {
  margin: 0 0 0 30px;
  padding: 0;
  float: left;
  list-style: none;
  display: flex;
  /* Removes whitespace between li elements */
  flex-direction: row;
  align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
  text-decoration: none;
  background: red;
  border-right: 1px solid #fff;
  color: #fff;
  padding: 0 12px;
  /* all below rules were added*/
  height: 50px;
  line-height: 50px;
  display: inline-block;
}

＆＃13;

<header id="top-nav-container">

  <div class="container nav-contents">

    <div class="nav-left">
      <a href="#" title="Home">
        <img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
      </a>
    </div>

    <div class="nav-mid">

      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>

    </div>

    <div class="nav-right">
      Stuff here...
    </div>

  </div>

</header>

＆＃13;

使内联导航项列表成为容器的完整高度

2 个答案: