javascript - 如何将图像准确放置在菜单位置

Question

您好，在下面的代码中，我想在同一行中显示导航菜单和 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>

CSS

#sliders1 {   
  width: 1050px;
  overflow: hidden;
  margin:0px auto 0px 120px;
  height:300px;
} 
.gallery{
  width:100%;
  height:100%;
}

ul.images {
  width:1050px;
  height:100%;

  overflow:hidden;
  position:relative;
  margin:0px auto;
  padding:0;

} 

ul.images li {
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  right:0;
  list-style:none;
}

ul.images li.show {
  z-index:500; 
  width:1050px;
  height:300px;
 overflow:hidden;
  background-size:100% 100%;
}

ul.images  li img {
  border-style: none;
   width:1050px;
  height:100%; 
   outline:none;
}

Answer 1

只需将main ID div 的position 属性更改为absolute。使用这个:

position:absolute;

Note: You are facing problem because of right side section main ID consuming space.

完整的 CSS:

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