Как центрировать одну кнопку независимо от другой тегом, который отображается внутри элемента div - PullRequest
Новая
       3

Как центрировать одну кнопку независимо от другой тегом, который отображается внутри элемента div

0 голосов
/ 24 октября 2018

У меня следующий код 

.container {
  height: auto;
  width: 200px;
  background-color: gray;
  display: inline-block;
  text-align: center;
}

.tocart {
  width: 150px;
  display: inline-block;
}

.wishlist {
  display: inline-block;
  right: 36px;
  opacity: 0;
  visibility: visible;
  position: relative;
}

.container:hover .wishlist {
  right: 0;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <button class="tocart">
        Add to Cart
      </button>
  <a href="" class="wishlist"><i class="fa fa-heart"></i></a>
</div>

В настоящее время кнопка «Добавить в корзину» смещена влево из-за значка списка пожеланий.Как сделать так, чтобы моя кнопка «Добавить в корзину» находилась в центре контейнера div и смещала его влево при наведении курсора на класс контейнера для размещения значка списка желаний?

Ответы [ 2 ]

0 голосов
/ 24 октября 2018 
.wishlist{
  position:absolute; /* change from relative */
  transition: all 0.3s; /* add */
}


.container:hover .wishlist{
  position:relative; /* add */
  /* transition: all 0.3s; */ /* delete */
}
0 голосов
/ 24 октября 2018

Вы можете достичь этого с помощью свойства position.Вот отредактированный CSS: 

.container {
  height: auto;
  width: 200px;
  background-color: gray;
  display: inline-block;
  text-align: center;
  position: relative;
}

.tocart {
  width: 150px;
  display: inline-block;
}

.wishlist {
  display: inline-block;
  right: 36px;
  opacity: 0;
  visibility: visible;
  position: absolute;
}

.container:hover .wishlist {
  right: 15px;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s;
  top: 2px;
}

.container:hover .tocart {
  float: left;
}
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
  <button class="tocart">
    Add to Cart
  </button>
  <a href="" class="wishlist"><i class="fa fa-heart"></i></a>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...