Question

嗨，在下面的代码中，我想在同一行显示navigationMenu和滑块。但我的问题是两个都在同一行显示，但图像给左侧留出了一些空间。

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

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

只需将position ID div的main属性更改为absolute即可。使用此：

position:absolute;

注意：由于右侧部分main，您正面临问题 ID 占用空间。

完整的css：

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

Answer 2

.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;
}

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

2 个答案: