html - 将最后一个 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。

查看 fiddle :

http://jsfiddle.net/rmj7q78t/