Question

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

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

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

Answer 1

float: center;在CSS中无效，如果您想了解更多关于浮点数的信息，我建议您查看＆＃34; CSS布局 - 浮动和清除＆＃34;关于W3C的文档：https://www.w3schools.com/css/css_float.asp

要将li与导航中心对齐，您可以执行以下操作：

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

ul.topnav li {
  display: inline-block
}

您还可以尝试使用更多Flexbox方法，只需：

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  display: flex;
  justify-content: center;
}

如果您决定使用flexbox，则无需添加：ul.topnav li { display:inline-block; }

现在支持Flexbox：http://caniuse.com/#feat=flexbox

Answer 2

您可以使用flexbox轻松完成此操作。

在您提供给W3网站的链接上，删除以下行：

ul.topnav li {float: left;}  /*remove this line of CSS*/

然后，将以下CSS添加到页面顶部的ul.topnav

 ul.topnav {
  display: flex;
  justify-content: center;

  // rest of CSS goes here

}

Answer 3

尝试像这样编辑css：

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

这里我们只是添加居中的文本对齐方式。下一步

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

这里我们删除fload：left并将显示设置为inline-block。这会为您创造所需的结果吗？

响应式导航栏中的中心菜单项

3 个答案: