如何將4個元素2排成一行？

Question

我有HTML這樣的：

<nav> 
    <ul> 
    <li><a href="#">lorem</a></li> 
    <li><a href="#">ipsum</a></li> 
    <li><a href="#">dolor</a></li> 
    <li><a href="#">sit</a></li> 
    </li> 
</nav> 

是有可能居中UL那個看起來像這樣：

|   lorem ipsum   | 
|   dolor sit   | 

我工作的響應網站，並在小屏幕上，我需要的文字在兩條線和中心。

Answer 1

就我個人而言，我認爲使用浮動元素會給初學者開發者帶來比解決方案更多的問題。我會去以下解決方案：

http://jsfiddle.net/W7aLA/

HTML：

<nav> 
    <ul> 
    <li><a href="#">lorem</a></li> 
    <li><a href="#">ipsum</a></li> 
    <li><a href="#">dolor</a></li> 
    <li><a href="#">sit</a></li> 
    </ul> 
</nav> 

CSS：

nav { 
    width: 400px; 
    text-align: center; 
} 

li { 
    list-style: none; 
    display: inline; 
} 

li:nth-of-type(even):after { 
    content: ""; 
    display: block; 
} 

Answer 2

嘗試：

ul { 
    text-align: center; 
    display: block; 
} 

li { 
    display: inline-block; 
    width: 50%; 
    margin-right: -4px; 
} 

OR

ul { 
    text-align: center; 
    display: block; 
    overflow: hidden; 
} 

li { 
    float: left; 
    width: 50%; 
} 

li:first-child+li+li { 
    clear: left; /* because nth-child doesn't work in IE8 */ 
} 

Answer 3

使用float: left和clear: left：

ul li { 
    float: left; 
} 

ul li:nth-child(2n + 1) { 
    clear: left; 
} 

Example