CSS | Navigationlinks填充问题

时间：2016-06-15 16:24:30

标签： html css padding navigationbar

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

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

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

3 个答案:

答案 0 :(得分：0)

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

它看起来像是你的截图

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

  

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

您可以在此处使用line-height来为您要为元素提供的高度使用一些百分比值。

示例：line-height：35px;将为容器提供一条35px的高度。

您的屏幕显示平均高度为60px。您可以使用（不含height）：

line-height:60px;

或（DEMO）

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

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

为什么行高会是一个好主意？

  

因为不需要静态高度，如果菜单分为多行（font-family未加载，访问者缩放等等），它不会很乱，并且会在不溢出的情况下展开下一个内容，...... 

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>

答案 2 :(得分：0)

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>

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

相关问题
最新问题