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

Question

我正在尝试将 Logo 与导航栏放在同一行，并且链接向右浮动。我将图像和 ul 放在同一个 div 中，但如何让链接拉伸(stretch)到与图像相同的高度？例如，悬停在链接上时，应突出显示从屏幕顶部到栏/ Logo 底部的整个高度。现在它只突出显示链接。

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/

Answer 1

希望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>