获得UL集中并且每行有两个li

Question

我尝试在每行显示两个LI的UL，并将所有文本都置于中心位置。到目前为止，LI只是转到UL的左侧。

＆＃13;

＆＃13;

ul {
  text-align: center;
  list-style-type: none;
  width: 100%;
}
ul li {
  display: inline;
}
ul li:nth-child(2n+1) {
  clear: both;
}

＆＃13;

<ul style="">
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要float li s（而不是内嵌），clear奇left的{​​{1}}

li

https://jsfiddle.net/nivas/yyt46dkL/

Answer 2

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
}

ul {
  display: inline-block;
  list-style-type: none;
  overflow: hidden;
}

li {
  width: 50%;
  float: left;
}

a {
  display: block;
  border: 1px solid;
  margin: .25em;
}

a:hover {
  background-color: silver;
}

a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

＆＃13;

<ul>
  <li><a href="#unpop">First item</a></li>
  <li><a href="#unpop">Second item</a></li>
  <li><a href="#unpop">Third item</a></li>
  <li><a href="#unpop">Forth item</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

想出来。

ul {
  text-align: center;
  list-style-type: none;
  width: 100%;
}
ul li {
  display: inline;
}
ul li:nth-child(2n+1) {
  clear: both;
}
ul li:nth-child(2n+1)::before{
  display: block;
  content: ' ';
}

<ul style="">
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
  <li><a href="#unpop">item</a>
  </li>
</ul>