gpt4 book ai didi

html - 我如何将图标与文本垂直并使其可链接?

转载 作者:行者123 更新时间:2023-11-28 17:02:56 25 4
gpt4 key购买 nike

这是我的 .html 文件

<body>
<header>
<a href="#"><img src="header_home.png" alt="logo" width="250"></a>
<nav>
<ul>
<li><img src="header_manual.png" alt="logo" width="20">Manuals</li>
<li><img src="header_news.png" alt="logo" width="20">News</li>
</ul>
</nav>
</header>
</body>

这是我的 CSS 文件:

html, body {
height: 100%;
margin: 0;
}


header {
background-color: black;
width: 100%;
height: 100px;
color:red;
}

header a img {
position: absolute;
top: 20px;
left: 5px;
}

header nav {
width: 60%;
height: 100px;
border: red 1px solid;
margin: 0 auto;
text-align:center;
}

header nav ul {
padding-left: 0;
}
header nav ul li {
display:inline-block;
height: 100px;
width: 150px ;
}

现在,我的导航标签中带有文本的每个图标都是内联的。我如何将图标与文本垂直并使其可链接?我想要的是每个文本上方和每个 block 中间的图标,然后使其可链接。

最佳答案

将图标包裹在 anchor 标记中,使其可点击。

<li><a href="#"><img src="header_manual.png" alt="logo" width="20">Manuals</a></li>

header a img 声明修改为 header > a > img 以在导航部分排除 img(仅针对 Logo )。

header > a > img {
position: absolute;
top: 20px;
left: 5px;
}

然后居中图标和文字

header nav img {
display:block;
margin:0 auto;
}

fiddle here .

关于html - 我如何将图标与文本垂直并使其可链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30885663/

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