gpt4 book ai didi

html - 将导航栏对齐到 css 中心并在按钮之间添加分隔线

转载 作者:太空宇宙 更新时间:2023-11-03 18:11:33 25 4
gpt4 key购买 nike

我有这个基本的导航栏,我想让菜单按钮居中,而且我还想要它们之间有一条分隔线。另外我认为我的代码可能有一些不必要的部分。这是我要创建的图像:

enter image description here

这是我的源代码:HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>NOT!fy</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="nav" align="center">
<span>
<ul>
<li><img src="img/notify_icon.png" alt="notify_icon" width="30px" /></li>
<li><a href="href">HOME</a></li>
<li><a href="href">FEATURE SET</a></li>
<li><a href="href">WHO ARE WE</a></li>
<li><a href="href">INDIEGOGO</a></li>
<li><a href="href">CONTACT US</a></li>
</ul>
</span>
</div>
</body>
</html>

这是我的 CSS 文件:

@charset "utf-8";
/* CSS Document */

#nav {
font-family: Century Gothic, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
margin-left:auto;
margin-right:auto;
background-color: #353539;
height: 50px;
width: auto;
font-weight: bold;
border-width:0px;
opacity:0.95;
}
#nav ul {
padding: 7px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#nav ul li {
list-style-type: none;
text-align: center;
float: left;
margin: 0px;
padding-left:50px;
}
#nav ul li a {
text-decoration: none;
color: #d2d2d2;
text-align: center;
display: block;
padding: 10px;
margin: 0px;
}
#nav ul li a:hover {
color: #ffd200;
}

body
{
background-color:#c5c5c5;
}

最佳答案

DEMO

这应该做你喜欢的事。

margin:0 auto 将页面上的元素居中,因此您只需将 li 父级设置为 auto 宽度并附加此 css。

关于html - 将导航栏对齐到 css 中心并在按钮之间添加分隔线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23643553/

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