CSS

Question

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

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>

但它应该看起来像：

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

Answer 1

在您的 CSS 中找到以下块：

#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;
    }

它看起来会像您的屏幕截图

以下是您的代码笔中的代码，经过 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>

Answer 2

当您为垂直填充或边距使用百分比值时，它使用宽度来计算它。

https://www.w3.org/TR/CSS2/box.html#padding-properties

在这里，您可以改为使用 line-height 来使用关于您要赋予元素的高度的百分比值。

示例：行高：35px；将为容器提供一行 35 像素的高度。

您的屏幕显示的平均高度为 60 像素。您可以使用 (没有 height) :

line-height:60px;

或(DEMO)

font-size:20px;
line-height:300%;

line-height:200%; 等于 line-height:2em; 两倍 font-size .

为什么行高是个好主意？

because static height is not needed, if the menu breaks into many lines (font-family not loaded,visitor zooming, ...) , it will not be messy and will expand without overflowing on next content, ...

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 {
  font-family: 'Open Sans Condensed', sans-serif;
  margin: 0;
  padding: 0;
  background-color: white;
  line-height: 60px;/* will size height and also center text/inline boxes on this value */
  border-top: 5px solid #A40900;
  border-bottom: 5px solid #A40900;
}

#header ul li {
  display: inline-block;
  list-style: none;
  margin: 0px;
  padding: 0;
  line-height: 100%;/*reset to normal*/
  text-align: center;
}

#header ul li a {
  color: #000;
font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 20px;
  font-weight: normal;
  margin: 0;
  padding: 0 1em;
  text-decoration: none;
  text-transform: uppercase;
}

#header ul li a:hover,
#header ul li.selected a {
  color: #0ba39c;
}

<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'><!-- had to pick up a font close to yours -->
<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>

Answer 3

body {
    background: black;
    font-family: Oswald;
    font-size: 20px;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    min-width: 960px;
    padding: 0;
}
ul{
  margin:0;
  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;
}
#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;
    border-top: 5px solid #A40900;
    border-bottom: 5px solid #A40900;
    padding: 10px 0;
}
#header ul li {
    display: inline-block;
    list-style: none;
    margin: 0px;
    padding: 0 15px;
    float: left;
    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>
    <title>XOXO</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="so/sample.css" />
</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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script type="text/javascript" src="so/sample.js"></script>
</body>

</html>

请在此处查找代码。全页检查结果

CSS | Navigationlinks 填充问题

CSS | Navigationlinks Padding problems

html

padding

navigationbar

为什么行高是个好主意？