gpt4 book ai didi

html - 我在构建水平导航栏时做错了什么?

转载 作者:可可西里 更新时间:2023-11-01 15:02:28 26 4
gpt4 key购买 nike

尝试在 html/css 中为 java/spring boot 元素制作一个简单的导航栏。如下所示,我的 html/css 技能非常有限。当然这是我在做的愚蠢的事情。提前致谢。

html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header> Welcome to Toner Stock </header>
<div id="mynav">
<ul>
<li><a href="home-page.html">Home</a></li>
<li><a href="add-buyer.html">Add Buyer</a></li>
<li><a href="add-manager.html">Add Manager</a></li>
<li><a href="current-stock.html">Current Stock</a></li>
<li><a href="transactions.html">Transactions</a></li>
</ul>
</div>
</body>
</html>

CSS:

header{
font-family: Impact, Haettenschweiler;
font-size: 45px;
text-align: center;
}

#mynav {
float: left;
margin: 0;
padding: 0;
width: 60px;
}

#mynav ul{

display: inline-block;
list-style-type: none;
height:auto;
text-align: center;
}

#mynav li{
display:inline-block;
}

最佳答案

导航栏(菜单)可以使用这样的东西:

删除链接下划线:text-decoration: none;

让导航栏连续列出所有元素,从 #mynav 中删除 width

header {
font-family: Impact, Haettenschweiler;
font-size: 45px;
text-align: center;
}

#mynav {
float: left;
margin: 0;
padding: 0;
}

#mynav ul {
display: inline-block;
list-style-type: none;
height: auto;
text-align: center;
}

#mynav li {
display: inline-block;
padding: 5px;
}

#mynav li a {
text-decoration: none;
}

#mynav li:hover {
background: lightgray;
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<header> Welcome to Toner Stock </header>
<div id="mynav">
<ul>
<li><a href="home-page.html">Home</a></li>
<li><a href="add-buyer.html">Add Buyer</a></li>
<li><a href="add-manager.html">Add Manager</a></li>
<li><a href="current-stock.html">Current Stock</a></li>
<li><a href="transactions.html">Transactions</a></li>
</ul>
</div>
</body>

</html>

关于html - 我在构建水平导航栏时做错了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43955725/

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