如何調整導航欄按鈕的大小並使其適合屏幕寬度？

Question

有人可以幫我使用導航欄嗎？ 我一直在嘗試研究如何自己創建一個，但按鈕似乎最終變小了，盡管片段width 100% ，但欄本身不會延伸到整個頁面。 提前致謝。

 .navBar { width: 100% }.navBar ul { list-style-type: none; } /* Styling of buttons on the NavBar */.navBar ul a { float: left; background-color: #202020; color: #ffffff; padding-bottom: 12px; display: block; text-decoration-line:none; font-family: 'Montserrat', sans-serif; size: 20px; } /* Styling of NavBar buttons when mouse hovers over it */.navBar ul a:hover { background-color: #006633

 <div Class=navBar>Test <ul>test1</ul> <ul>test2</ul> <ul>test3</ul> </div>

Answer 1

您正在尋找CSS 相對單位。

如果你想讓一個元素匹配屏幕的總寬度（這里有具體的措辭）那么你想使用width: 100vw; . 如果元素沒有在最左邊（或右邊）的像素處呈現，它將溢出屏幕。 使用width: 100%; 只有相對於它的父元素，而不是相對於屏幕的總寬度，才會產生相同的效果。

Answer 2

最好將 CSS 重置添加到 CSS styles 的頂部。 Web 瀏覽器具有默認的邊距和填充，可以防止您的 div 擴展屏幕的整個寬度。

將此添加到您的 CSS 樣式表的頂部。

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

此代碼將重置瀏覽器默認邊距和填充。 當您使用.navBar { width: 100%;}時，您的導航欄應該占據整個頁面寬度

對於您的按鈕，您可以添加更多填充，直到您滿意為止。 例如：

.navBar ul a {
  padding: 10px 30px;
}

這將為您的按鈕在頂部和底部提供 10 像素的填充，在左右提供 30 像素的填充。

如上所述，請 select 對您最有用的答案。