使用css對齊下面圖像的列表

Question

我想弄清楚如何對齊圖像（右上角按鈕）在3的最上面一行，然後是最下面的一行3.（* * ***）

我試着改變.main-nav的寬度來嘗試擠壓它們在下一行，但我認爲它是從上面繼承的東西。使用Chromes開發人員工具，我正在查看標題元素，並注意到ul.main-nav的高度爲0px，這可以阻止它們下降嗎？

任何指向我在正確的方向將是一個很大的幫助，謝謝！

Answer 1

這是你想要的嗎？ 我剛剛添加了一個寬度和浮點數：右側是李！

<ul class="main-nav" style="width: 287px;float: right;"> 
    <li class="item-rss"><a target="_blank" href="http://www.wp-arena.com/?feed=rss2"></a></li> 
    <li class="item-fav"><a target="_blank" href="#"></a></li> 
    <li class="item-contact"><a target="_self" href="#"></a></li> 
    <li class="item-xing"><a target="_blank" href="#"></a></li> 
    <li class="item-facebook"><a target="_blank" href="#"></a></li> 
    <li class="item-twitter"><a target="_blank" href="#"></a></li> 
</ul> 

Answer 2

您可以將圖像換成固定寬度的div，以適合3張圖像，其他三張圖像將放在下一行。

Answer 3

更改李CSS： display: block;和UL CSS：width: 300px; float:right;