![](/img/trans.png)
[英]How to place one element exactly to the same visible position, as another?
[英]how to place the images exactly in menu position
您好在下面的代码中,我想在同一行中显示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>
的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;
}
只需将main
ID div的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.