gpt4 book ai didi

html - CSS 试图将列表和标题居中

转载 作者:太空宇宙 更新时间:2023-11-04 00:57:41 24 4
gpt4 key购买 nike

当我尝试将 h1 和水平对齐列表过于居中时,我有这样一个奇怪的偏移......

enter image description here

列表稍微偏右一点,但为什么呢?我怎样才能完美地居中?

*   {
box-sizing: border-box;
}

body {
background-color: black;
}

header h1 {
position: relative;
text-align: center;
font-size: 5.5em;
font-weight: bold;
font-family: Arial;
letter-spacing: 11px;
color: white;
}

nav {
font-family: Verdana;
font-size: small;
text-align: center;
word-spacing: 15px;
list-style-type: none;
}

li {
display: inline;
}

li a {
text-decoration: none;
display: inline-block;
color: white;
}
    <body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Leben</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Alben</a></li>
<li><a href="#">Filme</a></li>
<li><a href="#">Auszeichnungen</a></li>
</ul>
</nav>
</body>

感谢帮助,非常感谢

最佳答案

只需从 ul 中删除边距/填充:

nav ul {
margin: 0;
padding: 0;
}

*   {
box-sizing: border-box;
}

body {
background-color: black;
}

header h1 {
position: relative;
text-align: center;
font-size: 5.5em;
font-weight: bold;
font-family: Arial;
letter-spacing: 11px;
color: white;
}

nav {
font-family: Verdana;
font-size: small;
text-align: center;
word-spacing: 15px;
list-style-type: none;
}

nav ul {
margin: 0; padding: 0;
}

li {
display: inline;
}

li a {
text-decoration: none;
display: inline-block;
color: white;
}
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Leben</a></li>
<li><a href="#">Karriere</a></li>
<li><a href="#">Alben</a></li>
<li><a href="#">Filme</a></li>
<li><a href="#">Auszeichnungen</a></li>
</ul>
</nav>
</body>

关于html - CSS 试图将列表和标题居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54185092/

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