将最后一个li元素移到其余内联的下面

Question

我有一个内联显示的链接列表。 我希望最后一个li定位在其上方的内联列表的中心。 如何使用CSS做到这一点？

原因是，当网页在移动设备中使用时，它无法容纳整个列表，因此我想将其移至下方。

 <ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Last Item</li>
 </ul>

Answer 1

您可以通过将text-align:center设置为ul和li元素来实现：

ul{
   list-style:none;
   height:100%;
   width:100%;
   padding:0;
   text-align:center;
}

ul li{
   text-align:center;
   display:inline-block;
   width:75px;
   height:20px;
   background:silver;
   border:1px solid black;
   padding:10px;
}

另外 ：确保ul的宽度为100％，并且ul的padding设置为零。 另外， li必须显示inline-block 。

查看小提琴：

http://jsfiddle.net/rmj7q78t/

Answer 2

这个CSS可以解决问题：

ul li {
  display: inline-block;
}

ul li:last-child {
  display: block;
  text-align: center;
}