導航欄在右側有額外的空間
[英]Navigation Bar has extra space on the right side
問題描述
我目前正在創建我的第一個網站，並創建了一個導航欄。 但我注意到欄的右側有一些額外的空間。 因此，當我突出顯示欄上的最后一個內容時，有一點不會改變顏色的空間（當我將鼠標懸停在選項卡上的內容上時，它會改變背景顏色）。 所以我想知道是否有人有解決這個問題的方法？
ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; overflow: hidden; background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; width: 742px; } ul.tab li { float: left; padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 64px; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </body> </html>
4 個解決方案
解決方案1
0 2017-01-07 01:09:19
您已將導航欄的寬度設置為 742 像素。 您所有項目（您的 li 的）的總寬度加起來不足以填滿整個條形。
嘗試：
ul.tab li {
float: left;
padding: 0px;
width: 25%;
}
4 個 25% 的項目總計 100% 的容器。
解決方案2
0 2017-01-07 01:13:58
導航欄的寬度大於當時導航項目的寬度。 除非您在項目上聲明與導航欄寬度相同的硬寬度，否則不應使用固定寬度。
我要做的是將ul.tab更改為display:inline-block; 這樣它只會根據需要占用盡可能多的空間，並且會縮小以匹配其直接后代的大小，並添加text-align: center; 到該元素的父元素（在本例中為body ）以將元素居中。
這是一個演示 - http://codepen.io/anon/pen/JEdywM
解決方案3
0 已采納 2017-01-07 01:15:05
試試 flexbox。
display: flex在ul ，和flex: 1在li ：
要將dropdown菜單與按鈕對齊， relative position按鈕，下拉 div 上的 100% 寬度，並刪除overflow hidden在ul中的overflow hidden
此外，您不需要向a元素添加左右填充，因為您將它們顯示為塊。
ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; /*overflow: hidden;*/ background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; width: 742px; display: flex; } ul.tab li { flex: 1; /*float: left;*/ padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 0; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; position: relative; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 100%; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 0; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </body> </html>
解決方案4
0 2017-01-07 01:16:32
您的li元素都具有動態寬度，這些寬度呈現為像素的浮點值並最終四舍五入為全像素。 這就是保證金的來源。 為了防止這種情況：
在ul.tab的 CSS 規則中， ul.tab刪除寬度設置並添加display: inline-block; .
PLUS：將ul包裹在具有text-align: center的容器 div 中：
（以整頁模式查看代碼段以查看結果）
.listcontainer { text-align: center; } ul.tab { list-style-type: none; margin: auto; font-family: "CopperPlate", Times, serif; padding-left: 0px; padding-right: 0px; overflow: hidden; background-color: #1A1B1F; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.6); opacity: .95; display: inline-block; } ul.tab li { float: left; padding: 0px; } ul.tab a { display: block; color: #E7E8EC; text-align: center; font-size: 16px; padding: 16px 64px; text-decoration: none; transition: .3s; } .home:hover { background-color: #0EB323; } .about:hover { background-color: #0EB323; } .projects:hover { background-color: #0EB323; } .contact:hover { background-color: #0EB323; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: rgba(34, 43, 47, .8); width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #0EB323} .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE HTML> <html> <title> Website </title> <head> <link rel = "stylesheet" href = "CSScode.css"> <script src = "JavaScript.js"></script> <style> </style> </head> <body> <div class="listcontainer"> <ul class = "tab"> <li><a class = "home" href = "HomePage.html">Home</a></li> <li><a class = "about" href = "#about"> About </a></li> <li class = "dropdown"> <a class = "projects dropbtn"> Projects </a> <div class = "dropdown-content"> <a href="#"> Project 1 </a> <a href="#"> Project 2 </a> <a href="#"> Project 3 </a> </div> <li><a class = "contact" href = "ContactPage.html"> Contact </a></li> </ul> </div> </body> </html>
使用 javascript 在 HTML 頁面的右側向 Word 添加額外空間
[英]Add Extra space to the Word at right side in HTML Page using javascript
如何在最小化瀏覽器中制作右側和左側導航欄子菜單
[英]how to make submenus of navigation bar on right side and on left side on minimization of browser
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.