我有一个内联显示的链接列表。我希望最后一个 li 位于其上方的内联列表的中心。我如何使用 css 做到这一点?
原因是,网页在移动端使用时放不下整个列表,所以想移到下面。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
最佳答案
您可以通过将 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 :
关于html - 将最后一个 li 元素移动到其余内联元素下方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31978420/