更改悬停效果的高度

我的悬停效果不完全与导航栏对齐。事实上，它们稍宽一些，我想解决这个问题。我尝试了一些东西，但没有成功。更改悬停效果的高度

这是怎么看起来像现在：

代码：

body { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/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: 15%; 
 
    height: auto; 
 
} 
 

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

 

 
.mainHeader nav { 
 
    background-color: #9cb34f; 
 
    
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 

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

 
.mainHeader nav ul li { 
 
    text-align: center; 
 
    float: left; 
 
    width: 24%; 
 
} 
 

 

 

 

 

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

 
.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; 
 
    display: inline-block; 
 
    height: 30px; 
 
    padding: 10px 130px; 
 
    
 
    
 
} 
 

 

 
.mainHeader p { 
 
    
 
} 
 

 

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

 

 

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

 
} 
 

 

 
.mainFooter p { 
 
    
 
    color: #fff; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    padding-left: 1%; 
 
}

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

 

 
</html>

当前问题：

的文本无法在导航栏的中间，间距是错误的悬停效果

来源

2017-09-25 Arborem

东西是不正确的，你可以在我上面添加的图片中看到。我也编辑了代码。这个问题在最新的图片 – Arborem

你一个[标签]需要显示inline-block的;并且比add height = 20px; （你的菜单高度）

.mainHeader nav ul li a { 
    display: inline-block; 
    height: 20px; 
}

来源

2017-09-25 12:08:00 ShadowFoOrm

我觉得你有这个问题，因为几个要素的高度，像<nav><ul>和<li>比小你的<a>的高度，尝试将其设置为25px（链接的实际高度），应该没问题。

那么就应该是这样的：https://jsfiddle.net/nodedL26/1/

来源

2017-09-25 12:06:57 Chaaampy

下面描述所以，如果25px是我的链接的高度，我可以将其更改为20px？如果我将导航栏设置为25px，但是我希望链接为20px – Arborem

@ShadowFoOrm回答了您，欢呼声;） – Chaaampy

这是不是导致此悬停规则，但height的在nav规则的限制。从nav擦除height设置并添加overflow: auto;到ul（环绕浮动li S中ul）

body { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('img/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: 59%; 
 
    width: 15%; 
 
    height: auto; 
 
} 
 

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

 
.mainHeader nav { 
 
    background-color: #9cb34f; 
 
    border-radius: 5px; 
 
    -moz-border-radius: 5px; 
 
    -webkit-border-radius: 5px; 
 
} 
 

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

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

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

<!DOCTYPE html> 
 
<html lang="de"> 
 

 
<head> 
 
    <title>Couture Anni</title> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="resources/css/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="resources/img/Content_variation_800_e.png" alt="Logo"> 
 
    <img class="Margrit" src="resources/img/IMG_5347_small.jpg" alt="Annamaria Hofstetter"> 
 
    <nav> 
 
     <ul> 
 
     <li><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>

来源

2017-09-25 12:11:48 Johannes

更改悬停效果的高度

回答

相关问题