如何制作双线导航栏？仅使用html和css

时间：2018-04-10 07:31:33

标签： html css

示例照片是这样的：

enter image description here

截至目前，我的代码是：

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

我希望有人能回答我。这将是我活动的一个巨大帮助..提前感谢

2 个答案:

答案 0 :(得分：2)

为此，只需将display: inline-block与max-width一起使用即可。查看下面的更新代码段

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

display: table和display: table-cell属性是您的问题的解决方案。您可以更改这些2 css选择器以获得所需的结果。

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

.topnav a{
    color: #ffffff;
    text-decoration: none;
    color: #ffffff;
    padding: 15px 16px;
    font-size: 15px;
    font-family: Raleway Medium;
    border-right: 1px solid #0120b8;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
相关问题
最新问题