html css导航栏阻止图像滑块的宽度
我正在尝试使用HTML和CSS制作一个简单的网站,因为我是编程的初学者。问题是,当我在CSS中将图像滑块设置为html css导航栏阻止图像滑块的宽度,html,css,Html,Css,我正在尝试使用HTML和CSS制作一个简单的网站,因为我是编程的初学者。问题是,当我在CSS中将图像滑块设置为display:block,并将其高度设置为100%时,由于divclass=“toggle”的缘故,图像滑块从右侧移动。我想知道引起它的原因 HTML: <nav> <div id="navigator"> <ul class="parent-nav" id="myTopnav"> <li
display:block
,并将其高度设置为100%时,由于divclass=“toggle
”的缘故,图像滑块从右侧移动。我想知道引起它的原因
HTML:
<nav>
<div id="navigator">
<ul class="parent-nav" id="myTopnav">
<li><span><a href="#">Menu1</a></span></li>
<li><span><a href="#">Menu2</a></span></li>
<li><span><a href="#">Menu3</a></span>
<ul class="child-nav">
<li><span><a href="#">test1</a></span></li>
<li><span><a href="#">test2</a></span></li></ul></li>
<li><span><a href="#">Menu4</a></span></li></ul>
<div class="toggle"><a href="javascript:void(0);" class="icon">☰</a></div>
</div>
</nav>
<section>
<div id="slider">
<div class="slider-container">
<div class="sider-image slid1">
<div class="silder-content">
<h4>Title 1</h4>
<p>test test test test..... </p>
</div>
</div>
<div class="sider-image slid2">
<div class="silder-content">
<h4>Title 2</h4>
<p>test test testtest test.....</p>
</div>
</div>
</div>
</div>
</section>
#navigator{
background: url("../image/navbg.gif") repeat-x center ;
background-size: contain;
height: 38px;
padding: 0px;
margin: 0px;
}
.parent-nav{
margin: 0px;
padding: 0px;
position: absolute;
}
.parent-nav > li{
float: left;
list-style-type: none;
padding: 0px;
margin:0px;
width: 100px;
}
.parent-nav > li > span{
}
.parent-nav > li > span > a{
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
background-position: center;
background-repeat: repeat-x;
border-bottom-style: none;
color: #ffffff;
display: block;
margin: 0px;
padding: 13px 20px;
border-right: 1px solid #4B4A4A;
}
.toggle{
width: 100px;
height: 100%; /*when i remove this my image slider shifts form right */
margin: 0px;
padding: 0px;
float: right;
}
.toggle > a{
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-size: 11px;
font-style: normal;
font-weight: bold;
border-bottom-style: none;
color: #ffffff;
padding: 12px 34px 12px 34px;
margin: 0 0 0 0;
border-right: 1px solid #4B4A4A;
display: block;
}
.toggle > a.icon{
display: block;
}
#slider{
height: 300px;
border: #1F1F1F 20px solid;
padding: 0px;
margin: 0px;
overflow: hidden;
}
#slider > .slider-container{
position: relative;
width: 500%;
height: 100%;
top: 0;
left: 0;
animation: animate 20s infinite;
z-index: -1;
}
.slider-container > .sider-image{
position: relative;
width: 20%;
height: 100%;
margin: 0;
float:left;
}
.slider-container > .sider-image > .silder-content{
background: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
position: absolute;
bottom: 30px;
left: 0px;
right: 500px;
padding: 5px;
transition: 0.5s;
}
.slider-container > .sider-image > .silder-content > h4{
color: #fff;
font-family: sans-serif;
font-size: 15px;
font-style: normal;
font-weight: bold;
padding: 0 0 0 0;
margin: 0px;
transition: 0.5s;
text-decoration: underline;
}
.slider-container > .sider-image > .silder-content > p{
color: #fff;
font-family: sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
padding: 5px;
margin: 0px;
transition: 0.5s;
}
“代码> MyPosie<代码>在你的代码中丢失了,你应该考虑做一个例子,这样人们可以更容易地重现你看到的问题。但是,我看到您有一个
位置:绝对
,然后使用浮动
定位项目。我怀疑这与你的问题有关