html - 如何在中间对齐此菜单(并且仍然响应)？

Question

网站页面: http://atlantiscorp.com.au/index.php/atlantis-solutions/landscaping-solutions/australian-vertical-gardens

我正在尝试将菜单对齐到中间的大标题下方。我可以通过设置 UL 的宽度(到 600 像素)然后执行 margin:0 auto 来获得它，但这不是响应式的，它也不是真正居中于中间。

有什么想法吗？ :(

Answer 1

试试这些样式调整:

ul.nav {
  /* width: 600px; */
  margin: 0 auto;
  text-align: center;
}

ul.nav li {
  /* float: left; */
  margin-bottom: 8px;
  margin-right: 10px;
  display: inline-block;
}

取消 ul.nav 的 width:600px;(或将其明确设置为 100%)，并为其赋予 text-align: center; 从 ul.nav li 中删除 float:left; 并设置 display: inline-block;