Aligning a list of images underneath each other with css

Question

I'm trying to figure out how to align the images (top right buttons) in a top row of 3, then a bottom row of 3. ( * **** )

I've tried to alter the .main-nav width to try and squeeze them on the next line but i think it's inheriting something from above. Using Chromes developer tool i was looking at the header element and noticed ul.main-nav has a height of 0px, could this be stopping them from coming down?

anything to point me in the right direction would be a great help, thanks!

Answer 1

Change the li css: display: block; and the ul css: width: 300px; float:right; width: 300px; float:right;

Answer 2

Is this what you want? I just added a width and float:right to the ul the li are in!

<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 3

您可以将图像包装成固定宽度的div，以适合3张图像，而其他3张将在下一行。