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

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 对您最有用的答案。