css 如何使UL/LI与左对齐文本在同一行居中？

fkvaft9z 于 2023-01-27 发布在其他

关注(0)|答案(1)|浏览(179)

我一直在尝试编写一个菜单栏，在网页顶部的同一行中有两个分组：左边是站点名称，中间应该是菜单选项（a ul/li）。到目前为止，在类似的问题之后，我已经写了下面的内容，乍一看，这正是我所寻求的。
超文本：

<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（在项目开始换行之前加宽浏览器窗口或缩小窗口时更明显），居中的ul/li实际上没有居中-它更靠近浏览器窗口的左侧而不是右侧。如何解决这个问题，以便ul/li在菜单栏中保持真正居中（就像站点名称不存在一样）与站点名称左对齐，而不管浏览器窗口的宽度是多少？（我假设是出于非换行的原因，因为我计划为较小的设备调整大小和行为。）
JSFiddle

css

来源：https://stackoverflow.com/questions/75205114/how-do-i-center-a-ul-li-in-the-same-row-as-left-aligned-text

1条答案

按热度按时间

kwvwclae1#

你使用了很多边距，宽度和其他东西。检查一下flexhere，你可以得到同样的结果，使用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项目，可以删除项目的容器等等。但总体思路是存在的。

赞(0）回复(0）举报 2023-01-27

我来回答

css 如何使UL/LI与左对齐文本在同一行居中？

1条答案

相关问题

热门标签

最新问答