html - 如何在导航栏中将两个单独的 类并排对齐？

Question

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

我做错了吗？我在下面附上了我的 HTML 和 CSS(我正在使用 Bootstrap )。如何让我的导航栏看起来像图片一样？

/* 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>

我想要实现的目标:

Answer 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>