Question

我在导航栏的中心有一个品牌形象，而在它的两边都有一个菜单。我想将两个菜单与图像对齐（图像右侧的菜单左对齐，反之亦然）。我在右侧菜单上设置了这个，但我无法对齐左侧的菜单。

我现在所拥有的，在大屏幕上看起来不错，但在较小的屏幕上没有正确缩小（在左侧，右边是正确的）。< / p>

CSS

.navbar{
  background-color: white;
  border: 0px;
  height: 200px;
}

.navbar-middle {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}

.navbar-left {
  padding-right: 10%;
  padding-top: 90px;
  width: 50%;

}

.navbar-right {
  padding-left: 3%;
  padding-top: 90px;
  width: 50%;
}

.navbar-left li {
  padding-left: 20%;
}

.navbar-right li {
  padding-left: 15%;
}

HTML

<ul class="nav navbar-nav navbar-left">
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Vision</a></li>
  <li><a href="#">The Team</a></li>
</ul>

<ul class="nav navbar-middle">
  <li><img src="200.jpg"></li>
</ul>

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
</ul>

感谢您的帮助！

Answer 1

我认为你是在追求这样的事情

ul{
  list-style: none;
  padding: 0;
}
.navbar{
  background-color: white;
  border: 0px;
  height: 200px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}

.navbar-left {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
}

.navbar-middle {
  margin: 0 20px;
}

.navbar-right {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

.navbar-left li {
  margin-left: 20px;
  white-space:nowrap;
}

.navbar-right li {
  margin-right: 20px;
  white-space:nowrap;
}

<div class="navbar">
<ul class="nav navbar-nav navbar-left">
  <li><a class="pull-right" href="#">Home</a></li>
  <li><a href="#">Our Vision</a></li>
  <li><a href="#">The Team</a></li>
</ul>

<img class="nav navbar-middle" src="https://placehold.it/200x100/894567/ffffff?text=Logo">

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">FAQs</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

Answer 2

从检查元素可以看出，您的三个ul似乎重叠。

因此，我将navbar-left和navbar-right类的宽度更改为45％，并为图像添加了宽度规格，即img src="200.jpg" size=10%。

据我所知，你的左ul看起来是正确对齐的，不是因为class="pull-right"而是因为.navbar-left li { padding-left: 20%; }。您可以对navbar-right执行相同操作，即.navbar-right li { padding-right: 20%; }。

结果如下：http://codepen.io/anon/pen/OMreKN。不确定这是否是您正在寻找的。

Answer 3

这是另一种选择：JSFiddle

<div class="wrapper">
    <ul class="nav navbar-nav navbar-left">
      <li><a class="pull-right" href="#">Home</a></li>
      <li><a href="#">Our Vision</a></li>
      <li><a href="#">The Team</a></li>
    </ul>

    <ul class="nav navbar-middle">
      <li><img src="200.jpg"></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">FAQs</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

body {
    margin: 0;
}
.wrapper {
    background-color: gray;
    font-size: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}
img {
    width: 100%;
}
.nav {
    display: inline-block;
    font-size: initial;
    list-style: none;
    padding: 0;
    vertical-align: middle;
}
li {
    display: inline-block;
    width: 75px;
}
.navbar-left, .navbar-right {
    width: 45%;
}
.navbar-middle {
    width: 10%;
}

将Navbar菜单对齐到页面中间

3 个答案: