堆棧內存溢出
  簡體   English   中英

我的html / css導航欄懸停功能導致列表項移出位置

[英]My html/css navigation bar hover function causes the list items to move out of place

 原文  2015-06-10 01:38:37  9   5    html/ css/ html5/ css3

問題描述

我不知道為什么，但是我很難解釋這個問題，如果書名不是我想說的話，抱歉。 我創建了另一種類型的html / css導航欄，這只是一種很好的做法，但我遇到了一個小問題。 如您所見，如果您在下面的代碼中運行，則將鼠標懸停在導航項上時，背景顏色就不合適了，我希望它像下面的圖像一樣伸展，但是它確實重疊了！ 感謝您的幫助！ 繼承人的代碼和圖像！ 圖片

 *{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; } header nav ul li a:hover{ background:#ADABAB; color:black; padding:5px 70px 5px 70px; } 
 <html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>

5 個解決方案

解決方案1
 1 已采納  2015-06-10 01:48:27

你很親近 讓我知道這是否是您想要的。

在CSS中查看我的評論 

 *{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; /*added padding*/ padding:10px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; } /* chaged from: header nav ul li a:hover to:header nav ul li:hover also removed the padding on hover */ header nav ul li:hover{ background:#ADABAB; color:black; } 
 <html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>

解決方案2
 0  2015-06-10 01:50:19

JSFiddle： http : //jsfiddle.net/hqadcurt/

我在這里所做的是確保<a>與列表相同。 

header nav ul li a{
    font-family:Impact;
    font-size:25px;
    text-decoration: none;
    color:white;
    font-weight:900;
    text-align:center;
    display:inline-block;
    max-width:100%;
    width:100%;
}

如果您不希望在懸停時四處走動，只需移除懸停時的填充即可。 

header nav ul li a:hover{
    background:#ADABAB;
    color:black;
}

解決方案3
 0  2015-06-10 01:50:56

使用li:hover而不是li a:hover並刪除其上的填充。 

 * { margin: 0; padding: 0; } body { background: black; /*background-image:url(../res/back.jpg);*/ background-size: cover; } header { width: 200px; height: 600px; background-color: rgba(255, 255, 255, 0.5); border: 4px solid white; border-radius: 7px; margin: 10px 0px 0px 360px; } header h1 { font-family: Impact; font-size: 30px; color: white; font-weight: 900; text-align: center; margin-top: 75px; } header nav {} header nav ul {} header nav ul li { list-style: none; text-align: center; margin-top: 25px; position: relative; top: 60px; } header nav ul li a { font-family: Impact; font-size: 25px; text-decoration: none; color: white; font-weight: 900; text-align: center; } header nav ul li:hover { background: #ADABAB; } header nav ul li:hover a { color: black; } 
 <html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a> </li> <li><a href="#">GALLERY</a> </li> <li><a href="#">ABOUT</a> </li> <li><a href="#">PRODUCTS</a> </li> <li><a href="#">CONTACT</a> </li> <li><a href="#">DONATE</a> </li> </ul> </nav> </header> </body> </html>

解決方案4
 0  2015-06-10 01:53:10

 *{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin:15px 0px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; display:block; text-align:center; padding:5px 0px; } header nav ul li a:hover{ background:#ADABAB; color:black; } 
 <html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>

只是在某些地方更改了邊距和填充。 你近了

解決方案5
 0  2015-06-10 01:54:46

嘗試這個： 

header nav ul li a{
    font-family:Impact;
    font-size:25px;
    text-decoration: none;
    color:white;
    font-weight:900;
    text-align:center;
    padding: 5px 0px;
    display: block;
}
header nav ul li a:hover{
    background:#ADABAB;
    color:black;
}

在這里看到Jsfiddle 

 *{margin:0; padding:0;} body{ background:black; /*background-image:url(../res/back.jpg);*/ background-size:cover; } header{ width:200px; height:600px; background-color:rgba(255, 255, 255, 0.5); border:4px solid white; border-radius:7px; margin:10px 0px 0px 360px; } header h1{ font-family:Impact; font-size:30px; color:white; font-weight:900; text-align:center; margin-top:75px; } header nav{ } header nav ul{ } header nav ul li{ list-style:none; text-align: center; margin-top:25px; position:relative; top:60px; } header nav ul li a{ font-family:Impact; font-size:25px; text-decoration: none; color:white; font-weight:900; text-align:center; padding: 5px 0px; display: block; } header nav ul li a:hover{ background:#ADABAB; color:black; } 
 <html> <head> <meta charset="UTF-8"> <title>Home</title> <link rel="stylesheet" type="text/css" href="style/style.css"> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/script.js"></script> </head> <body> <header> <h1>WELCOME</h1> <nav> <ul> <li><a href="#">HOME</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DONATE</a></li> </ul> </nav> </header> </body> </html>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 當我將鼠標懸停在導航欄上時，導航欄上的列表項會向前移動 懸停導航欄上的純HTML和CSS下拉列表 HTML / CSS：如何將導航欄移到中間？ 導航欄列表項目使用懸停向右移動 導航欄使用 html 和 css，a：hover 問題 在CSS上懸停不適用於我的導航欄 懸停導航欄 - CSS 如何將導航欄移動到其他位置？ 如何將導航欄中的列表項居中 HTML CSS導航欄不夠寬，高亮懸停顯示錯誤
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM