<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 {} 上使用 vertical-align 属性CSS。
.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>关于html - 我正在尝试将图像用作我的 "li a"之一，但 img 和 a 不会保持在同一高度。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52680928/