Перемещение последнего элемента 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%, а padding из ul установлено на ноль. Кроме того, li должен иметь дисплей inline-block.

Заканчивать скрипкой:

http://jsfiddle.net/rmj7q78t/

Answer 2

Этот CSS будет делать трюк:

ul li { 
    display: inline-block; 
} 

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