1
首先，我需要爲自己的弱語言道歉。CSS：將幻燈片的箭頭（圖像）放在它的內部元素上面
我在使用HTML,CSS和JavaScript進行幻燈片放映（但此任務不需要JavaScrpt）。問題是當我調整window的大小時，左側和右側的箭頭不在元素的上方，但它會推送列表項。爲了避免混淆，我有JSfiddle
及以下使用的代碼：
h1 {
\t font-family: 'Raleway', sans-serif;
\t text-align: center;
\t padding: 50px 0px;
\t text-transform: uppercase;
\t font-weight: 200;
}
.games-slideshow {
\t position: relative;
\t width: 100%;
\t height: 500px;
\t background-color: red;
}
.games-slideshow .left-arrow {
\t float: left;
\t opacity: .5;
\t margin-left: 20px;
\t cursor: pointer;
\t position: relative;
\t top: 50%;
\t transform: translateY(-50%);
\t z-index: 9999;
}
.games-slideshow .right-arrow {
\t float: right;
\t opacity: .5;
\t margin-right: 20px;
\t cursor: pointer;
\t position: relative;
\t top: 50%;
\t transform: translateY(-50%);
\t z-index: 9999;
}
.games-slideshow .navigate {
\t width: 100px;
\t margin: auto;
\t position: absolute;
\t bottom: 0;
\t left: 0;
\t right: 0;
}
.games-slideshow .navigate ul {
\t padding: 0px;
\t margin: 0px;
\t list-style: none;
}
.games-slideshow .navigate ul li {
\t display: inline-block;
\t padding: 0px 5px 0px 0px;
\t list-style: none;
}
.games-slideshow .navigate ul li img {
\t height: 20px;
\t cursor: pointer;
\t opacity: .5;
\t transform: opacity 0.15s ease-in-out;
}
.games-slideshow .navigate ul li img:hover {
\t opacity: 1;
\t transform: opacity 0.15s ease-in-out;
}
.games-slideshow .page1 {
\t position: relative;
\t max-width: 1200px;
\t height: 60%;
\t background-color: yellow;
\t top: 50%;
\t transform: translateY(-50%);
\t margin: auto;
\t padding: 0px;
}
.games-slideshow .page1 li {
\t position: relative;
\t height: 100%!important;
\t max-width: 320px;
\t display: inline-block;
\t background-color: green;
\t list-style: none;
}
.games-slideshow .page1 .not-last {
\t margin-right: 12.15%;
}
.games-slideshow .page1 .last {
\t margin-right: 0%!important;
}<body>
<div class="games-slideshow"> <img class="left-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/leftSlideShowArrow.png"/> <img class="right-arrow" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/rightSlideShowArrow.png"/>
<div class="navigate">
<ul>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
<li class="last"><img class="slideshow-circle" src="/Applications/XAMPP/xamppfiles/htdocs/MyFutureCompanyWebsite/images/slideshowCircle.png"/></li>
</ul>
</div>
<ul class="page1">
<li class="not-last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
<li class="not-last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
<li class="last">
<div class="game">
<p>Game Title</p>
<a>More</a> </div>
</li>
</ul>
</div>
<p id="debug"></p>
</body>
\t \t \t \t嘗試調整窗口的大小，看看那裏的箭頭推列表項的問題。這是我面臨的問題。有誰知道我該如何讓這些箭頭不推動或影響幻燈片內的元素？
我很感謝你的回答！
老兄，你會發現很多的相同的例子。邏輯很簡單：將箭頭放在圖像容器左側和右側的絕對位置。在你的圖像容器中，設置「white-space：nowrap」，以便你的物品不會掉落。相應地設置項目的寬度。然後使用JS/jQuery來處理你的滑塊。或者等一下，你實際上可以使用任何現有的JS滑塊！ – Sayed
謝謝你，男人！我必須將位置更改爲絕對值，而不是浮點數：從左到左：0和浮點數：從右到右：0.將您的評論發佈爲答案。你應該得到一些聲譽！ – GeorGios
很高興它幫助！ :) – Sayed