gpt4 book ai didi

html - 导航栏居中对齐

转载 作者:太空宇宙 更新时间:2023-11-04 02:59:50 25 4
gpt4 key购买 nike

有没有办法让这个导航栏一直在页面中间?我确信使用百分比将是最好的方法。我添加了我认为需要更改的行。我只是想习惯 CSS。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
<head>
<style>
.menu {
position:absolute;
background:#CCC;
width:100%;
top:100px;
left:0;
height:23px;
padding: 0;
text-align:center;
font-size:20px;
font-weight:light;
}

.ty-menu__items {
position: absolute;
left:20%; /* This is the line that needs changing, I think*/
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
}

.ty-menu__item {
float: left;
}

a:link, a:visited {
display: block;
width: 200px;
font-weight: light;
color: #FFF;
background: #CCC;
text-align: center;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}

a:hover, a:active {
background: #000;
border-bottom: 4px solid #fff;
}
</style>
</head>
<body>
<div class="menu">
<ul class="ty-menu__items">
<li class="ty-menu__item"><a href="#home">Home</a></li>
<li class="ty-menu__item"><a href="#news">News</a></li>
<li class="ty-menu__item"><a href="#contact">Contact</a></li>
<li class="ty-menu__item"><a href="#about">About</a></li>
</ul>
</div>
</body>

</html>

最佳答案

ul 中删除 left 属性,然后从 li 中删除 float 属性,而不是制作 lidisplay: inline-block; 这样你就可以简单地 text-align: center; 它们。代码如下:

.ty-menu__items {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
text-align: center;
}

.ty-menu__item {
display: inline-block;
}

关于html - 导航栏居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31506147/

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