Question

我试图将菜单栏链接居中。在每次我尝试将其居中时，它会将每个链接放在一个新行上。所以我做到了float:center;它使每个链接成为一条新线，并且不会将它们全部集中在一起。有什么想法吗？

＆＃13;

body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}

＆＃13;

<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

＆＃13;

Answer 1

在display:flex中使用justify-content:center和ul（从float:left移除li）

Float:center不存在。

＆＃13;

body {
  margin: 0;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display:flex;
  justify-content:center
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}

＆＃13;

<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

＆＃13;

Answer 2

只需将[{date: "2016-03",total: 1704}, {date: "2016-03", total: 1926}, {date:"2016-02", total: 1578},{date: "2016-04",total: 912}, {date: "2016-01",total: 246}, {date: "2016-01", total: 1446 }]添加到text-align:center，ul添加到display:inline-block;，就像这样：

li

这是一个带有上述代码的jsFiddle：https://jsfiddle.net/AndrewL32/4jendh7j/

中心菜单栏链接

2 个答案: