时间戳

首页 > 解决方案 > html/css 间距删除了我的滑块按钮

html - html/css 间距删除了我的滑块按钮

问题描述

所以在我的代码中，我创建了两个部分，一个部分只有 3x3 照片，另一部分是图像滑块。所以问题是我想在 2 部分之间留下一个间隙，但是每次我为我的边距设置一个值时，它也会向下移除我的滑块按钮。我玩过我的css，但每当我设置我的边距值时，我都想不出它来推动我的滑块按钮。

第一张图片 | 示例 1 - 没有边距值且按钮仍然存在
第二张图片 | 示例 2 - 边距值和按钮消失

示例 1 - 没有边距值且按钮仍然存在

示例 2 - 边距值和按钮消失

.slide-container {
  width: 800px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
}

.image-container {
  width: 2400px;
  height: 600px;
  position: relative;
  transition: left 2s;
  -webkit-transition: left 2s;
  -moz-transition: left 2s;
  -o-transition: left 2s;
}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
}

.button-container {
  top: -20px;
  position: relative;
}

.slider-button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: white;
}

#slider-image-1:target~.image-container {
  left: 0px;
}

#slider-image-2:target~.image-container {
  left: -800px;
}

#slider-image-3:target~.image-container {
  left: -1600px;
}
<section>
  <div class="roww">
    <div class="columnn">
      <img src="photos/insertimage3.jpg">
      <img src="photos/insertimage4.jpg">
      <img src="photos/insertimage3red.jpg">
      <img src="photos/insertimage4red.jpg">
    </div>
    <div class="columnn">
      <img src="photos/insertimage3lb.jpg">
      <img src="photos/insertimage4blue.jpg">
      <img src="photos/insertimage3grey.jpg">
      <img src="photos/insertimage4grey.jpg">
    </div>
    <div class="columnn">
      <img src="photos/insertimage3green.jpg">
      <img src="photos/insertimage4green.jpg">
      <img src="photos/insertimage3purple.jpg">
      <img src="photos/insertimage4purple.jpg">
    </div>
  </div>
</section>

<section>

  <body>
    <div class="slide-container">
      <span id="slider-image-1"></span>
      <span id="slider-image-2"></span>
      <span id="slider-image-3"></span>
      <div class="image-container">
        <img src="photos/finalst/ftst.jpg" class="slider-image">
        <img src="photos/finalst/sdst.jpg" class="slider-image">
        <img src="photos/finalst/bkst.jpg" class="slider-image">
      </div>
      <div class="button-container">
        <a href="#slider-image-1" class="slider-button"> </a>
        <a href="#slider-image-2" class="slider-button"> </a>
        <a href="#slider-image-3" class="slider-button"> </a>
      </div>
    </div>
  </body>
</section>

标签： htmlcss

解决方案

推荐阅读