在页面上排列DIV菜单

Question

您可以从下面的链接中找到菜单，正文和CSS中绘制的形状

但不能正确安排此菜单

____________
|  M E N U
| |      |
| |      |
| |      |
| |      |
| |      |
| |      |
| |______|
|___________

HTML

<ul class="hr">
    <li class="hr"> <img src="Logo.jpg" draggable="false"> </li>
    <li class="hr"> <img src="left.jpg" draggable="false"> </li>
    <li class="hr"> <img src="Home.jpg" draggable="false" onmouseover="this.src='Home_Hover.jpg';" onmouseout="this.src='Home.jpg';"> </li>
    <li class="hr"> <img src="Blank1.jpg" draggable="false"> </li>
    <li class="hr"> <img src="Services.jpg" draggable="false" onmouseover="this.src='Services_hover.jpg';" onmouseout="this.src='Services.jpg';"> </li>
    <li class="hr"> <img src="Blank2.jpg" draggable="false"> </li>
    <li class="hr"> <img src="work.jpg" draggable="false" onmouseover="this.src='work_hover.jpg';" onmouseout="this.src='work.jpg';">  </li>
    <li class="hr"> <img src="Blank3.jpg" draggable="false"> </li>
    <li class="hr"> <img src="About.jpg" draggable="false" onmouseover="this.src='about_hover.jpg';" onmouseout="this.src='about.jpg';"> </li>
    <li class="hr"> <img src="Right.jpg" draggable="false"> </li>
</ul>

CSS：

ul.hr { margin: 0; padding: 0px; } 
ul.hr li { display: inline; padding: 0px; }

谢谢！

Answer 1

请参阅 here for updated JSFiddle

我在UL上设置了1200px的宽度，并在图像上添加了display:block以删除浏览器默认值添加的任何空间。