导航栏上的链接有100%的高度作为标志

links on navigation bar have 100% height as logo

本文关键字：高度 标志 100% 链接 导航      更新时间：2023-09-26

我试图把一个标志放在同一行的导航栏与链接浮动到右边。我把图像和ul在同一个div，但我怎么能让链接拉伸相同的高度作为图像?例如，悬停在链接上时，应该突出显示从屏幕顶部到栏/徽标底部的整个高度。现在它只突出显示链接。

HTML 

<section id="header">
        <div id="nav">  
            <img src="images/logo.png" alt="logo" style="width:15%;height:15%">     
            <ul id="menu">
                <li><a class="link" href="#home">Home</a></li>
                <li><a class="link" href="#about">What we do</a></li>
                <li><a class="link" href="projects.html">Projects</a></li>
                <li><a class="link" href="#careers">Careers</a></li>
                <li><a class="link" href="#contact">Contact</a></li>
            </ul>
            <!-- so float right won't work -->
            <br style="clear:both;" />
        </div>
</section>
CSS 

.logo {
   display: inline-block;
   float: left;
   vertical-align: middle;
}
#menu {
   float: right;
   display: inline-block;
   padding: 0;
   margin: 0;
   vertical-align: top;
}
#menu li {
   display: inline;
   vertical-align: center;
   float: left;
   padding: 0;
   margin: 0 5px 0 5px;
}
#menu li a {
   text-transform: uppercase;
   font-weight: bold;
   font-family: 'Open Sans';
   color: #696969;
   display: block;
   text-align: center;
   padding: 10px 10px;
   text-decoration: none;
   -webkit-transition:color 0.5s ease-in;
   position: relative;
}
#menu li a:hover {
   color: #004080;
   background-color: #f2f2f2;
}

这是我的jsfiddle https://jsfiddle.net/f86u3edt/

对于一个想法，我要这样做http://michaelaldridge.com/

希望flex能帮到你。下面是更新后的Demo

.logo {
	display: inline-block;
	float: left;
	vertical-align: middle;
}
#menu {
  float: right;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0;
  margin: 0;
  vertical-align: top;
}
#menu li {
	display: flex;
	height: 100%;
	align-items: center;
	vertical-align: center;
	float: left;
	padding: 0;
	margin: 0 5px 0 5px;
}
#menu li a {
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'Open Sans';
	color: #696969;
	display: block;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
	-webkit-transition:color 0.5s ease-in;
	position: relative;
}
#menu li:hover {
	color: #004080;
	background-color: #aaa;
}
#nav{
	display: flex;
}
<section id="header">
			<div id="nav">	
				<img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" style="width:15%;height:15%">		
				<ul id="menu">
					<li><a class="link" href="#home">Home</a></li>
					<li><a class="link" href="#about">What we do</a></li>
					<li><a class="link" href="projects.html">Projects</a></li>
					<li><a class="link" href="#careers">Careers</a></li>
					<li><a class="link" href="#contact">Contact</a></li>
				</ul>
				<!-- so float right won't work -->
				<br style="clear:both;" />
			</div>
		</section>

这里有一个小提琴可以帮助你:https://jsfiddle.net/f86u3edt/7/

对于HTML代码，我用div包装徽标图像，如下所示: 
<div id="logo-wrapper">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" class="logo">   
</div>

并设置其样式为:

#logo-wrapper {
    float: left;
    display: inline-block; /* inline with the menu div */
}

此外，还有一些其他的变化，如设置导航栏的高度和一些响应的高度样式添加到其他组件。

希望这对你有帮助!

只需将以下CSS添加到您的代码中，即可正常工作。没有太大的变化:)

 .link{
  line-height:45px
}
相关文章：