当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Get a UL to be centered and have two li's per row

问题描述:

I'm trying to show a UL with two LI's per row and have all of the text centered. So far the LI's simply go to the left side of the UL.

ul {

text-align: center;

list-style-type: none;

width: 100%;

}

ul li {

display: inline;

}

ul li:nth-child(2n+1) {

clear: both;

}

<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>

网友答案:

You need to float the lis (and not make them inline), and clear the left of odd lis

ul
{
  list-style:none;
  text-align: center;
}

ul li
{
  float: left;
}

ul li:nth-child(2n+1) {   /*or ul li:nth-child(odd)*/
  clear: left;
}

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

网友答案:

* {
  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;
}
<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>
网友答案:

Figured it out.

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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: