make header元素使用整个空间

时间：2017-09-24 14:56:21

标签： html css

我得到了四个标题元素，关于，投资组合和kontakt。现在，我希望这些跨越整个导航栏，每个使用25％的栏。我怎样才能做到这一点？ 另外，我定义主页总是显示为红色，但是你可以看到它比导航栏本身更宽，我也想修复它。

代码：

＆＃13;
＆＃13; 
body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 90%;
    margin: 0 auto;
}


.mainHeader img.Logo {
    position: absolute;
    right: 5%;
    top: 54%;
    width: 20%;
    height: auto;
}

.mainHeader img.Margrit {
    position: absolute;
    right: 5%;
    top: 25%;
    width: 20%;
    height: auto;
}


.mainHeader nav {
    width: 100%;
    background-color: #9cb34f;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
}

.mainHeader nav ul li {
    text-align: center;
    display: inline-block;
    
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
    
}


.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    
}


.mainHeader p {
    
}


.mainHeader p.inBearbeitung {
    position: absolute;
    top: 45%;
    left: 5%;
    font-size: 150%;
}



.mainFooter {
    position: absolute;
    bottom: 3%;
    width: 90%;
    left: 5%;
    right: 5%;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
	display: table;

}


.mainFooter p {
    
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}
＆＃13; 
<!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
		<header class="mainHeader">
			<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
			
			
			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
		</header>
		
		
        
        <footer class="mainFooter">
  			
    		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
  			
		</footer>
        
    </body>


</html>
＆＃13;
＆＃13;
＆＃13;

这就是现在的样子：

enter image description here

2 个答案:

答案 0 :(得分：1)

这将指向正确的方向：

.mainHeader nav ul li {
  width: 25%;
}

.mainHeader nav ul li a {
  display: block;
}

注意：您还需要计算菜单项之间的间距或设置22％的百分比，以便所有内容都在同一行。

希望这有帮助！

答案 1 :(得分：1)

在css中进行了以下更改。您可以更改这些以在链接上设置所需的标题宽度和颜色方案。

  1. 将.mainHeader的宽度更改为100％。

    .mainHeader { width: 100%; margin: 0 auto; }

  2. 将宽度更改为23％。正如@Gabriel在回答中所建议的那样，这22％或23％是由于边距或填充应用于这些链接，因此，在宽度为25％时，它们会移至下一行。

    .mainHeader nav ul li { text-align: center; display: inline-block; width:23%; }

  3. 更改了以下代码段

    .mainHeader nav a:hover, .mainHeader nav a:active, 
.mainHeader nav .active a:link, mainHeader nav .active a:visited 
{
  background-color: #CF5C3F;
  text-shadow: none;
}

    4. 删除活动链接上的默认红框显示。

    .mainHeader nav a:hover, mainHeader nav .active a:visited {
  background-color: #CF5C3F;
  text-shadow: none;
 }

    编辑：要将所有4个元素集中在一起，您需要执行此操作。 

    .mainHeader nav ul {
    list-style: none;text-align: center;
}

.mainHeader nav ul li {

    display: inline-block;
    width:12%;
}


    body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('tape-measure.jpg');
    background-size: cover;
    height: 1000px;
    color: #000305;
    font-size: 100%;
    font-family: 'Coming Soon', 'Lucida Sans Unicode', cursive;
    line-height: 1.5;
}

a {
    text-decoration: none;
}

a:link, a:visited {
    color: #CF5C3F;
}

a:hover, a:active {
    background-color: #CF5C3F;
    color: #fff;
}

.mainHeader {
    width: 100%;
    margin: 0 auto;
}


.mainHeader img.Logo {
    position: absolute;
    right: 5%;
    top: 54%;
    width: 20%;
    height: auto;
}

.mainHeader img.Margrit {
    position: absolute;
    right: 5%;
    top: 25%;
    width: 20%;
    height: auto;
}


.mainHeader nav {
    width: 100%;
    background-color: #9cb34f;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.mainHeader nav ul {
    list-style: none;
}

.mainHeader nav ul li {
    text-align: center;
    display: inline-block;
    border:1px solid red;
    width:23%;
}


.mainHeader nav a:link, .mainHeader nav a:visited {
    color: #fff;
    
    
}

.mainHeader nav a:hover, mainHeader nav .active a:visited {
    background-color: #CF5C3F;
    text-shadow: none;
    
}


.mainHeader nav ul li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    
    
}


.mainHeader p {
    
}


.mainHeader p.inBearbeitung {
    position: absolute;
    top: 45%;
    left: 5%;
    font-size: 150%;
}



.mainFooter {
    position: absolute;
    bottom: 3%;
    width: 90%;
    left: 5%;
    right: 5%;
    height: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #9cb34f;
	display: table;

}


.mainFooter p {
    
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}
    <!DOCTYPE html>
<html lang="de">
    <head>
		<title>Couture Anni</title>
		<meta charset="utf-8">
		
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon" rel="stylesheet">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
		<header class="mainHeader">
			<img class="Logo" src="Content_variation_800_e.png" alt="Logo">
			<img class="Margrit" src="IMG_5347_small.jpg" alt="Annamaria Hofstetter">
			
			<nav>
				
				<ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
				
		    </nav>
			
			
			<p class="inBearbeitung"><strong>Diese Seite ist in<br>Bearbeitung.<br> Bis demnächst!</strong></p>
		</header>
		
		
        
        <footer class="mainFooter">
  			
    		<p>Copyright © <a href="#" title="couture-anni">couture-anni.ch</a></p>
  			
		</footer>
        
    </body>


</html>

    enter image description here

相关问题
最新问题