如何制作两行导航栏？仅使用HTML和CSS

用户名

样本照片是这样的：

到目前为止，我的代码是这样的：

.topnav{
	background-color: #0624c5;
	overflow: hidden;
	padding: 30px;
}

.topnav a{
	color: #ffffff;
	text-decoration: none;
	color: #ffffff;
	padding: 15px 16px;
	font-size: 15px;
	font-family: Raleway Medium;
	border-right: 1px solid #0120b8;
}

.topnav a:hover {
  color: #ff0004;
  text-decoration: underline;
}

.topnav .icon {
  display: none;
}

<body>
	<div>
		<div class="topnav" id="myTopnav">
			<a href="#" style="color: #ff0004;">Home</a>
			<a href="#">About Us</a>
			<a href="#"><span>Companionship & Personal Care Services</span></a>
			<a href="#">Alzheimer’s & Parkinson’s Services</a>
			<a href="#">Our Caregivers</a>
			
		</div>
	</div>
</body>

我希望有人能回答我。这将对我的活动大有帮助。

超级用户

为此，只需display: inline-block与一起使用max-width。检查以下更新的代码段

.topnav{
  background-color: #0624c5;
  overflow: hidden;
  padding: 30px;
}

.topnav a {
  color: #ffffff;
  text-decoration: none;
  color: #ffffff;
  padding: 15px 10px;
  font-size: 15px;
  font-family: Raleway Medium;
  border-right: 1px solid #0120b8;
  text-align: center;
  max-width: 150px;
  display: inline-block;
  vertical-align: middle;
}

.topnav a:hover {
  color: #ff0004;
  text-decoration: underline;
}

.topnav .icon {
  display: none;
}

<div>
  <div class="topnav" id="myTopnav">
    <a href="#" style="color: #ff0004;">Home</a>
    <a href="#">About Us</a>
    <a href="#"><span>Companionship & Personal Care Services</span></a>
    <a href="#">Alzheimer’s & Parkinson’s Services</a>
    <a href="#">Our Caregivers</a>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。