如何调整导航栏按钮的大小并使其适合屏幕宽度？

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 relative units。

如果你想让一个元素匹配屏幕的总宽度（这里具体写法）那么你想使用width: 100vw;。如果元素未在最左侧（或右侧）像素处呈现，它将溢出屏幕。使用 width: 100%; 会产生相同的效果，只是它是相对于它的父元素，而不是相对于屏幕的总宽度。

Answer 2

最好将 CSS 重置添加到 CSS 样式的顶部。 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回答对您最有用的答案。

如何调整导航栏按钮的大小并使其适合屏幕宽度？

How do I resize the buttons of a navigation bar and make it fit the width of the screen?

html

css

web-frontend