W3CSS幻灯片箭头位于底部，如何调整至容器两侧？

问题说明 #

我使用W3CSS构建幻灯片组件，当前切换箭头显示在底部，尝试通过margin属性调整位置未成功。参考W3Schools官方示例中箭头位于容器两侧，请问需要在代码中添加什么内容才能实现该效果？

问题原因 #

1. 左侧按钮未使用W3CSS的定位类，仅自定义了buttonleft但未配置定位样式
2. 幻灯片图片设置了width:25%，导致容器宽度未被撑满，箭头定位逻辑失效
3. 代码中未引入W3CSS核心样式文件，这是实现W3CSS定位类的关键前提

解决步骤 #

• 引入W3CSS样式文件：在HTML的<head>标签内添加W3CSS的核心样式链接
• 修正左侧按钮的类名：给左侧按钮添加W3CSS的定位与样式类，替换自定义的buttonleft
• 调整图片宽度：将所有幻灯片图片的宽度改为100%，让容器撑满，保证箭头定位到容器两侧

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入W3CSS核心样式 -->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://kit.fontawesome.com/15456887b7.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU3DPk4gCVZ0g40k0xiOjiwcqGY9MJkY4quA&usqp=CAU" class="logo">
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="auction.html">Auction</a></li>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="proceedings.html">Proceedings</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
            <i class="fa-solid fa-bars" id="menu-icon"></i>
        </div>
    </div>

    <div class="w3-content w3-display-container">
        <!-- 图片宽度改为100% -->
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/f6/d7/91/b0/c4/a8/41/a1/a4/da/02/38/c8/de/dd/6c/f6d791b0-c4a8-41a1-a4da-0238c8dedd6c-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/55/85/98/b0/60/4b/44/d8/90/83/15/56/03/e0/7b/57/558598b0-604b-44d8-9083-155603e07b57-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/71/e2/4d/a2/cb/10/42/99/a7/94/b2/50/2e/96/72/33/71e24da2-cb10-4299-a794-b2502e967233-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/26/77/14/f7/22/ff/40/99/83/8d/01/1b/ae/93/1d/3b/267714f7-22ff-4099-838d-011bae931d3b-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/3a/e9/36/2c/d3/08/4e/6b/bd/e6/06/7b/2a/22/89/a1/3ae9362c-d308-4e6b-bde6-067b2a2289a1-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/eb/f2/fc/2a/3f/3d/41/87/88/36/bc/17/68/d6/14/3d/ebf2fc2a-3f3d-4187-8836-bc1768d6143d-large::r:0.jpg" style="width:100%">
        <img class="mySlides" src="https://d1yb6h7rvkcay2.cloudfront.net/aa/8e/9c/02/aa/1d/48/f4/82/a1/63/f1/fa/c8/bb/52/aa8e9c02-aa1d-48f4-82a1-63f1fac8bb52-large::r:0.jpg" style="width:100%">
      
        <!-- 左侧按钮添加W3CSS定位类 -->
        <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
        <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
      </div>
      <script src="index.js"></script>
</body>
</html>

CSS部分（无需修改）

.mySlides {display:none;}

JS部分（无需修改）

/* Slide Show */
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n >= x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}

内容的提问来源于stack exchange，提问作者therealslim