[英]Moving last li element to below the rest inline
I have a list of links that are displayed inline. 我有一个内联显示的链接列表。 I want the last li to be positioned centered of the inline list above it.
我希望最后一个li定位在其上方的内联列表的中心。 How can I do this with css?
如何使用CSS做到这一点?
The reason for this is, when the web page is used in mobile it can't fit the entire list, so I want to move it below. 原因是,当网页在移动设备中使用时,它无法容纳整个列表,因此我想将其移至下方。
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Last Item</li>
</ul>
You can do this by setting text-align:center
to both the ul
and li
element: 您可以通过将
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;
}
IN ADDITION : Make sure that the ul
has a width of 100% and the padding
of the ul
is set to zero. 另外 :确保
ul
的宽度为100%,并且ul
的padding
设置为零。 Also, the li
must have a display of inline-block
. 另外,
li
必须显示inline-block
。
Check out the fiddle: 查看小提琴:
This css will do the trick: 这个CSS可以解决问题:
ul li {
display: inline-block;
}
ul li:last-child {
display: block;
text-align: center;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.