Question

我正在尝试在导航栏的同一行上放置一个徽标，并将链接浮动到右侧。我把图像和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/

Answer 1

希望flex会帮助你。这是更新的 Demo

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这是一个可以帮助你的小提琴：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 */
}

此外，还有一些其他更改，例如为导航栏设置高度以及为其他组件添加一些响应高度样式。

希望这能帮到你！

Answer 3

只需将以下css添加到您的代码中即可正常工作。没有大的改变:)）

return

导航栏上的链接具有100％的高度作为徽标

3 个答案: