html - 在元素的左右放置箭头

Question

我在中心有一个图标，左右有两个箭头来滚动浏览现有的图标。我希望图标两侧的箭头水平定位在图标本身的中心。我能怎么做？这样，箭头位于右上角和左上角，图标显示在中间但较低的位置。

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";  
}

.increase {
  float: right;
  cursor: pointer;
}

.decrease  {
  float:left;
  margin: 0px 15px 15px 0px;
  cursor: pointer;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

#contenitore {
  width: 60%;
  background-color: blue;
}
  img {
    max-width: 100%;
    height: auto;
  }
      
  
  img:hover {
    width: 310px;
    height: auto;
  }

  .mySlides {
    display:flex;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    margin: auto;
    top:250px;
    left:0;
    right:0;
    bottom:0;
    position: absolute;
  
  }

<!-- Icons fontAwesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<header class="ricerca">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 align-self-center">

        <span class="decrease" onclick="plusDivs(-1)" value="Decrease Value"><i class="fas fa-chevron-circle-left" style="font-size:50px;"></i></span>


        <div class="w3-tooltip">
        <img class="mySlides" shadow-lg p-3 mb-5 src="https://image.flaticon.com/icons/png/512/945/945170.png" &nbsp;";>
        </div>

        


        <span class="increase" onclick="plusDivs(1)" value="Increase Value"><i class="fas fa-chevron-circle-right" style="font-size:50px;"></i></span>
      </div>
    </div>
  </div>
</header>

标签： htmlcss

Answer 1

在您的情况下，我认为position: abosolute在图标上进行样式设置不是一个明智的主意。我将其更改为.icon-container. 你可以看看它是否有帮助。

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";  
}

.increase {
  float: right;
  cursor: pointer;
}

.decrease  {
  float:left;
  margin: 0px 15px 15px 0px;
  cursor: pointer;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

#contenitore {
  width: 60%;
  background-color: blue;
}
img {
  max-width: 100%;
  height: auto;
}

img:hover {
  width: 310px;
  height: auto;
}
.icon-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mySlides {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin: auto
}

<!-- Icons fontAwesome -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

<header class="ricerca">
  <div class="container">
    <div class="row">
      <div class="icon-container col-sm-12 align-self-center">

        <span class="decrease" onclick="plusDivs(-1)" value="Decrease Value"><i class="fas fa-chevron-circle-left" style="font-size:50px;"></i></span>


        <div class="w3-tooltip">
        <img class="mySlides shadow-lg p-3 mb-5" src="https://image.flaticon.com/icons/png/512/945/945170.png">
        </div>

        


        <span class="increase" onclick="plusDivs(1)" value="Increase Value"><i class="fas fa-chevron-circle-right" style="font-size:50px;"></i></span>
      </div>
    </div>
  </div>
</header>