如何在导航栏中对齐两个单独的 <ul> 类？答案

【问题标题】：How to align two seperate <ul> classes next to each other in navbar?如何在导航栏中对齐两个单独的 <ul> 类？
【发布时间】：2019-02-11 04:18:58
【问题描述】：

我的导航栏中需要两个单独的列表，都与公司图片的右侧对齐，中间还有一个 <li>。我已经尝试在两者上对齐并使用边距，但是当我调整浏览器大小时，它的外观会发生变化（最坏的情况）。

我做错了吗？我在下面附上了我的 HTML 和 CSS（我正在使用引导程序）。如何让我的导航栏看起来像图片？

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	position: absolute;
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

我想要实现的目标：

【问题讨论】：

您已将它们放在同一个容器中，在同一个列定义中。这是一个很好的起点。您到底在寻找什么，因为下面提供的答案看起来与您提供的图片非常相似？我认为更多地研究引导约定符合你的最大利益。如果您打算使用引导程序，您不妨让它为您完成所有工作，而不是尝试添加您添加的所有特定位置样式。 Bootstrap 可以为您处理。

标签： html css twitter-bootstrap navigation navbar

【解决方案1】：

这是因为 navbarimg 类中的绝对位置。

从navbarimg 中删除position: absolute;

/* Navigation */
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

【解决方案2】：

我将绝对位置更改为相对位置，并使用内联块为 nav 和 li 创建样式，以使其与添加的一些定位样式对齐。希望对您有所帮助。

/* Navigation */

.nav{
display:inline-block;
position: relative;
left: 20%;
margin-top: -15px;
}
.nav-right{
right:10%;
}
li{
display:inline-block;

}

#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}

.navbarimg {
	position: relative;
	left: 15%;
	margin-top: -15px;
}

.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

这迫使我所有的
元素到页面顶部？

期望的结果是什么？我以为你想要像你在顶部内嵌显示的图像这样的元素？

我的目标是让我的元素垂直居中但水平对齐图像的显示方式

【解决方案3】：

希望这会有所帮助。谢谢

/* Navigation 
#menu.navbar-default {
	background-color: #fff;
	border-color: rgba(231, 231, 231, 0);
	height: 65px;
}
/* 
.navbarimg {
	position: absolute;
	left: 15%;
	margin-top: -15px;
}
*/
.nav-stacked {
	font-size: 16px;
    line-height: 26px;
    letter-spacing: .5px;
	color: #333333;
}

.nav-stacked li:hover {
	background-color: none;
}

.nielsennav {
	font-family: 'Knockout','Open sans', sans-serif;	
	text-transform: uppercase;
	color: #000;
}

.navbar-header{display:flex}
.nav.navbar-nav{flex-direction: row;}

a.navbar-brand{
  padding-top:0;
  padding-bottom: 0;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header col-lg-12 col-md-12"> 
    <a class="navbar-brand" href="https://www.nielsen.com/us/en.html"> <img src="img/navbargrey.png" alt="Nielsen" width="45" height="65" class="navbarimg"> </a>
      <ul class="nav navbar-nav navbar-right">
		
        <li><a href="joincreate.html">Sign Up</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-center ">		  
        <li><a href="welcomenz.html">Home</a></li>
        <li><a href="howitworks.html">How it works</a></li>
        <li class="active"><a href="joincreate.html">Join</a></li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：