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

how to place the images exactly in menu position

本文关键字：菜单 位置 图像      更新时间：2023-09-26

Hi在下面的代码中，我想在同一行中显示导航菜单和滑块。但我的问题是，两者都显示在同一行，但图像给了左侧一些空间。

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

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

只需将mainIDdiv的position属性更改为absolute。使用此：

position:absolute;

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

完整css：

#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;
}
相关文章：