我正在嘗試在導航欄中平均分配鏈接
[英]I am trying to evenly space the links across my navigation bar
問題描述
我正在嘗試在導航欄上平均分配指向我網站的鏈接。 我在最后一個鏈接上遇到了麻煩，因為它是一個下拉列表，與其他鏈接分開。 通過在CSS樣式表中為.navbar a添加width: 25% ，我可以在導航欄中均勻地分離非下拉鏈接。 我嘗試將width: 25%添加到.dropdown的width: 25% ， .dropdown沒有做到。 我也嘗試將其添加到.dropdown .dropbtn但這都沒有。
這是我的HTML布局的示例：
/* Navbar container */ .navbar { overflow: hidden; background-color: #272424; font-family: Arial; } /* Links inside the navbar */ .navbar a { float: left; font: Arial; font-size: 20px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; width: 25%; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; } /* Dropdown button */ .dropdown .dropbtn { font-size: 20px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ width: 100%; } /* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: #81A3A7; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Name</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="navbar"> <nav> <a href=index.html>About</a> <a href=projects.html>Projects</a> <a href=publications.html>Publications</a> <div class="dropdown"> <button class="dropbtn">Writing </button> <div class="dropdown-content"> <a href="why_writing.html">Why Write?</a> <a href="dollops.html">Dollops</a> <a href="longforms.html">Longforms</a> <a href="technical_science.html">Technical/Science</a> <a href="quotes.html">Quotes</a> <a href="words.html">Words</a> <a href="notes.html">Notes</a> </div> </div> </nav> </div> <header> <h1>Why Write?</h1> </header> <p>Coming soon!</p> </body> </html>
這是顯示問題的圖片：
這就是我要的：
這是不對的：
4 個解決方案
解決方案1
1 2019-07-30 10:44:44
歡迎！ 只需在div.dropdown 添加 width:25% ， 您的Dropdown就會與其他鏈接使用相同的寬度。
解決方案2
0 2019-07-30 10:34:26
您在<a>填充刪除填充或使其成為寬度計算的一部分
* {box-sizing: border-box;}
解決方案3
0 2019-07-30 10:35:53
一切都正確，只是您可以添加width：25％; 在您的下拉CSS中
.dropdown {
float: left;
overflow: hidden;
width: 25%;
}
解決方案4
0 已采納 2019-07-30 10:47:35
我已根據您的要求進行了一些更改，請檢查。
/* Navbar container */ *{ box-sizing: border-box; } .navbar { overflow: hidden; background-color: #272424; font-family: Arial; } /* Links inside the navbar */ .navbar a { float: left; font: Arial; font-size: 20px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; width: 25%; } /* The dropdown container */ .dropdown { float: left; overflow: hidden; width: 25%; } /* Dropdown button */ .dropdown .dropbtn { font-size: 20px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; /* Important for vertical align on mobile phones */ margin: 0; /* Important for vertical align on mobile phones */ width: 100%; } /* Add a red background color to navbar links on hover */ .navbar a:hover, .dropdown:hover .dropbtn { background-color: #81A3A7; } /* Dropdown content (hidden by default) */ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /* Links inside the dropdown */ .navbar .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; width:auto; } /* Add a grey background color to dropdown links on hover */ .dropdown-content a:hover { background-color: #ddd; } /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Name</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="navbar"> <nav> <a href=index.html>About</a> <a href=projects.html>Projects</a> <a href=publications.html>Publications</a> <div class="dropdown"> <button class="dropbtn">Writing </button> <div class="dropdown-content"> <a href="why_writing.html">Why Write?</a> <a href="dollops.html">Dollops</a> <a href="longforms.html">Longforms</a> <a href="technical_science.html">Technical/Science</a> <a href="quotes.html">Quotes</a> <a href="words.html">Words</a> <a href="notes.html">Notes</a> </div> </div> </nav> </div> <header> <h1>Why Write?</h1> </header> <p>Coming soon!</p> </body> </html>
如何使用width屬性均勻地分隔導航欄的元素？
[英]How can I evenly space out the elements of my navigation bar using the width attribute?
如何獲得導航鏈接在頁面上平均分布並居中？
[英]How do I get my nav links to spread evenly across and be centered in the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.