gpt4 book ai didi

html - CSS | Navigationlinks 填充问题

转载 作者:行者123 更新时间:2023-11-28 05:41:49 25 4
gpt4 key购买 nike

我正在尝试构建一个新的主页...但是我遇到了导航栏填充的问题。这是我的导航栏:

CodePen

body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;

}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
height: 35px;
padding-top: 2%;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen beim Phönix-Brandschutz</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
<ul id="navigation">
<span id="mobile-navigation">&nbsp;</span>
<li class="selected border-right">
<a href="index.html">Startseite</a>
</li>
<li class="border-right">
<a href="about.html">Über uns</a>
</li>
<li class="border-right">
<a href="anfahrt.html">Anfahrt</a>
</li>
<li class="border-right">
<a href="leistungen.html">Leistungen</a>
</li>
<li class="border-right">
<a href="anfrage.html">Kontaktanfrage</a>
</li>
<li>
<a href="allgemein.html">Allgemeine Informationen</a>
</li >
<li class="border-left">
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>
</body>
</html>

但它应该看起来像: Screendesign Navbar

你能帮我解决填充问题吗?

最佳答案

在您的 CSS 中找到以下 block :

#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0;
text-align: center;
}

并将 padding: 0; 更改为 padding: 0 5px;

将 5px 调整为您想要的任何值,可大可小。值越大,差距越大,值越小,差距越小。

所以你最终得到:

#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 5px;
text-align: center;
}

它会看起来像你的截图

以下是您的 codepen 中的代码,带有 CSS 编辑。下次记得在你的问题中包含代码

body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/

p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
}
.border-left {
border-left: 5px solid #A40900;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
height: 35px;
padding-top: 2%;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 5px;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover,
#header ul li.selected a {
color: #0ba39c;
}
<div id="header">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<ul id="navigation">
<span id="mobile-navigation">&nbsp;</span>
<li class="selected border-right">
<a href="index.html">Startseite</a>
</li>
<li class="border-right">
<a href="about.html">Über uns</a>
</li>
<li class="border-right">
<a href="anfahrt.html">Anfahrt</a>
</li>
<li class="border-right">
<a href="leistungen.html">Leistungen</a>
</li>
<li class="border-right">
<a href="anfrage.html">Kontaktanfrage</a>
</li>
<li>
<a href="allgemein.html">Allgemeine Informationen</a>
</li>
<li class="border-left">
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>

关于html - CSS | Navigationlinks 填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37840856/

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