响应式导航栏中的中心菜单项 [英] Center menu items in responsive navbar

问题描述

w3schools 有一个很好的导航栏示例，可以响应较小的屏幕:

w3schools has a nice example of a nav bar that will respond to a smaller screen:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

如何让菜单项居中而不是向左对齐?设置 ul.topnav li {float: center;} 只是让它们垂直堆叠.

How can I have the menu items centered, instead of aligned to the left? Setting ul.topnav li {float: center;} just makes them stack vertically.

推荐答案

尝试像这样编辑 css:

Try editing the css like this:

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align:center;
}

这里我们只是添加居中文本对齐.下一个

here we are just adding centered text alignment. Next

ul.topnav li {display:inline-block;}

这里我们移除了 fload:left 并将显示设置为 inline-block.这是否为您创造了理想的结果?

Here we are removing the fload:left and setting the display to inline-block. Does this create the desired results for you?

这篇关于响应式导航栏中的中心菜单项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！