如何将 UL/LI 置于与左对齐文本相同的行中？

Question

我一直在尝试编写一个菜单栏，该菜单栏在网页顶部的同一行中有两个分组：左侧是网站名称，中间应该是菜单选项（ul/li）。 到目前为止，在类似的问题之后，我写了以下内容，乍一看似乎完全符合我的要求。

HTML：

<div class="menubar">
  <a href="#" class="logo">SITE NAME</a>
  <ul class="ul">
    <li><a href="#">MENU 0</a></li>
    <li><a href="#">MENU 1</a></li>
    <li><a href="#">MENU 2</a></li>
    <li><a href="#">MENU 3</a></li>
  </ul>
</div>

CSS：

.menubar {
  width: 100%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
  position: fixed;
  top: 0;
  display: flex;
  flex-flow: row nowrap;
}

.logo {
  width: 33.33%;
  float: left;
  margin-left: 20px;
  font-size: 24px;
}

.ul {
  font-size: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ul li {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
}

但是，如果您仔细查看 JSFiddle（在项目开始换行之前加宽浏览器 windows 或缩小 window 时更明显），“居中”的 ul/li 实际上并未居中——它更靠近浏览器的左侧window比对。 我该如何解决这个问题，以便 ul/li 始终真正居中于菜单栏中（就好像站点名称不存在一样），站点名称左对齐，而不管浏览器窗口的宽度是多少？ （我假设出于非包装原因，因为我计划调整较小设备的尺寸和行为。）

JSFiddle

Answer 1

你使用了很多边距、宽度和东西。 在此处检查flex ，您可以获得相同的东西，使用 flex 和 directions 正确对齐。

<!-- NEW CODE -->
<nav>
    <div class="logo">
      <span>Your Company</span>
  </div>
  <ul class="nav-items">
    <li class="nav-item"> Menu 1 </li>
    <li class="nav-item"> Menu 2 </li>
    <li class="nav-item"> Menu 3 </li>
    <li class="nav-item"> Menu 4 </li>
  </ul>
</nav>

<!-- OLD CODE -->
<nav>
  <div class="logo">
    <img src="https://placehold.it/200x200" alt="logo">
  </div>
  <div class="menu-items">
    <div class="menu-item"> Menu 0 </div>
    <div class="menu-item"> Menu 1 </div>
    <div class="menu-item"> Menu 2 </div>
    <div class="menu-item"> Menu 3 </div>
  </div>
</nav>

和 css

// MORE PROPERTIES

nav {
    align-items: center;
}

nav div.logo {
    position: absolute;
}

// OLD-NEW CSS
nav {
    display: flex;
    border: 1px solid pink;
}

nav div.logo {
  border: 1px solid green;
  display: flex;
  align-items: center;
}

nav div.logo span {
  padding: 0 0.5rem;
}

ul.nav-items {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

ul.nav-items li {
  margin: 0 0.25rem;
  padding: 0.5rem;
  border: 1px solid blue;
}

// OLD CSS
nav {
  display: flex;
}

nav div.menu-items {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}

nav div.menu-items div.menu-item {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

小提琴：

新： https://jsfiddle.net/vzgn0Lju/1/

旧： https://jsfiddle.net/kp9nsmah/1/

我在菜单选项之间添加了一些边距，您可以稍微调整一下，但 flex 比使用列表和许多东西要容易得多。 您可以使用 span 而不是 div.menu 项目，可以删除项目等的容器。 但总的想法是存在的。