更改懸停效果的高度

我的懸停效果不完全與導航欄對齊。事實上，它們稍寬一些，我想解決這個問題。我嘗試了一些東西，但沒有成功。更改懸停效果的高度

這是怎麼看起來像現在：

代碼：

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

更改懸停效果的高度

回答

相關問題