gpt4 book ai didi

html - 垂直显示图标 HTML

转载 作者:行者123 更新时间:2023-12-04 10:22:22 25 4
gpt4 key购买 nike

我正在使用图标作为我正在创建的应用程序的导航。它们当前水平显示,如下所示:https://gyazo.com/bb7cbab48941ffd2e2d2b2fa5c748d72

我需要做什么才能使这些垂直堆叠?这是我的代码:

<!doctype html>
<html>
<head>
<style>
.navbar {
width: 100%;
background-color: #555;
}
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: black;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover:not(.active) {
background-color: grey;
border-radius: 20px;
}
.active {
background-color: yellow;
border-radius: 20px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<a class="active" href="#"><i class="fa fa-fw fa-align-justify"></i></a>
<a href="#"><i class="fa fa-fw fa-wifi"></i></a>
<a href="#"><i class="fa fa-fw fa-user"></i></a>
<a href="#"><i class="fa fa-fw fa-gear"></i></a>
</div>
</body>
</html>

感谢您的任何帮助或建议!

最佳答案

您可以在 css 中的“.navbar a”上使用以下样式

.navbar a {
display: block;
}

关于html - 垂直显示图标 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60795037/

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