css - 在页面上排列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 上设置了 1200 像素的宽度，并在图像上添加了 display:block 以删除浏览器默认添加的任何空间。