我正在尝试使用图像作为我的"li a"之一，但是 img 和 a 没有保持在同一高度。

<nav class="second-nav">
<ul>
<li><a href="#"><img src="images/cnnTrends-btn-sprite.png"/></a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</nav>

我正在做一个导航栏，元素对齐，但 img 和 li a 不在同一高度。我怎样才能把它设计成这样，所以一切都可以在同一高度？

我不知道你的CSS是什么样子的，但假设它是什么样子的，你可以在nav .image {}css上使用vertical-align属性。

.second-nav {
background-color: #333;
color: #fff;
width: 100%;
text-align: center;
}
.second-nav img {
vertical-align: top; /* Align image with top of li a tags */
/*
vertical-align: center; --> Align image with center of li a
vertical-align: bottom; --> Align image with bottom of li a
*/
}
.second-nav ul {
list-style-type: none;
}
.second-nav a {
text-decoration: none;
color: #fff;
}
.second-nav li {
display: inline-block;
margin-right: 5px;
margin-left: 5px;
}

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="UTF-8">
<link rel="stylesheet" href="css/so_help.css" type="text/css">
		<title></title>
	</head>
	<body>
<header>
<nav class="second-nav">
<ul>
<li><a href="#"><img src="https://placeimg.com/75/75/any"/></a></li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</nav>
</header>
	</body>
</html>

相关内容

最新更新

热门标签：