gpt4 book ai didi

html - 我正在尝试将图像用作我的 "li a"之一,但 img 和 a 不会保持在同一高度。

转载 作者:行者123 更新时间:2023-11-28 01:00:42 25 4
gpt4 key购买 nike

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com