Javascript 如何将图像精确地放置在菜单位置

您好，在下面的代码中，我想在同一行中显示navigationMenu和slider。但我的问题是，它们都在同一行中显示，但图像给了左侧一些空间

如何使用宽度和高度向左移动图像

html

<div id="main">

<ul id="navigationMenu">
   <li>
        <a class="home" href="index.html">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="About.html">
            <span>About Us</span>
        </a>
    </li>

    <li>
         <a class="services" href="Specialties.html">
            <span>Specialties</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="facilities.html">
            <span>Facilities</span>
        </a>
    </li>

    <li>
        <a class="contact" href="Contact.html">
            <span>Contact us</span>
        </a>
    </li>
</ul>

</div> 
<div id="sliders1">
      <div id="slider">
      <div class="gallery">
        <ul class="images">
          <li class="show"><img style="padding-right:40px" width:950;height:300px" src="img/1.jpg" alt="photo_one" /></li>
          <li><img width="950" height="300" src="img/2.jpg" alt="seascape" /></li>
          <li><img width="950" height="300" src="img/3.jpg" alt="seascape" /></li>
          <li><img width="950" height="300" src="img/4.jpg" alt="seascape" /></li>
          <li><img width="950" height="300" src="img/5.jpg" alt="seascape" /></li>
          <li><img width="950" height="300" src="img/6.jpg" alt="seascape" /></li>
        </ul>
      </div>
     </div>
     </div>

---

只需将

main

IDdiv的

position

属性更改为

absolute

。使用以下命令：

position:absolute;

注意：由于右侧部分

main

ID占用空间

完整css：

#main {
  margin: 0px auto;
  position: absolute;/*changed*/
  width: 40px;
  float: left;
}

#main {
  margin: 0px auto;
  position: absolute;/*changed*/
  width: 40px;
  float: left;
}

.wrap {

    position: relative;

}
nav {
    background-image: linear-gradient(#fff, #ccc);
    border-radius: 6px;
    padding: 0 20px;
    position: relative;
}

.menu {
    background: none repeat scroll 0 0 #fff;
    position: absolute;
    width: 100%;
    z-index: 9999;
}