我有一个菜单的文本幻灯片。在幻灯片放映的第一张幻灯片上,页脚很好。对于第二,第三,第四,第五和第七张幻灯片,页脚转到页面的中间。第6页脚也很好。幻灯片由箭头手动控制。如果已回答,请引导我到主题。这与简单的“脚不在脚下”不同。 (页脚在网站的其他页面上看起来还不错)很抱歉,代码太长了,但是我不得不说所有这些以充分显示问题
我尝试过在每张幻灯片下都使用&nbsp,而不是在底部仅使用一张。我尝试过调整幻灯片的最大宽度。
//SLIDE CSS
* {box-sizing: border-box}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
//FOOTER CSS
footer {
background: teal;
bottom: 0;
width: 100%;
padding: 10px;
color: white;
}
//HTML CODE
<div class="slideshow-container">
//this one hs normal footer
<div class="mySlides fade">
<div class="numbertext">1 / 7</div>
<span class = "left" style = "width: 35%;">
//content
</span>
<span class = "left" style = "width: 30%;">
//content
</span>
<span class = "left" style = "width: 35%;">
//content
</span>
</br>
</br>
</div>
// only showed two slides to shorten code
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
// J A V A S C R I P T
<script language = "javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
</script></br>
//F O O T E R C O D E
<footer style = "line-height: 70px" class = "footer">
<div class = "foot1">
<div class = "foottitle">Restaurant</div>
</div>
<div class = "foot2">
<div class = "ul2">
<div class = "footsub">VISIT US</div>
<div class = "li2">Address</div>
<div class = "li2">Blah blah</div>
<div class = "li2">city zipcode</div>
</div>
</div>
</footer>
当我在所有幻灯片上时,我都希望页面的页脚位于底部
答案 0 :(得分:0)
如果您正在使用“相关”之类的任何位置,以及“底部”之类的偏移量,那么我认为您也可以通过删除页脚和滑块上的位置来进行设置。 如果它不起作用,那么如果它不存在,是否有任何实时链接,那么滑块的主包装上将应用什么样式?