1

Помогите, пожалуйста, как изменять расстояние между элементами, не затрагивая остальные (как например эту кнопку '-')

* {
  box-sizing: border-box;
}

.shopping-cart {
  width: 750px;
  height: 423px;
  margin: 80px auto;
  background: #FFFFFF;
  box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.title {
  height: 60px;
  border-bottom: 1px solid #E1E8EE;
  padding: 20px 30px;
  color: #5E6977;
  font-size: 18px;
  font-weight: 400;
}

.item {
  padding: 20px 30px;
  height: 120px;
  display: flex;
}

.item:nth-child(3) {
  border-top: 1px solid #E1E8EE;
  border-bottom: 1px solid #E1E8EE;
}

.buttons {
  position: relative;
  padding-top: 30px;
  margin-right: 60px;
}

.delete-btn {
  display: inline-block;
  Cursor: pointer;
  border: none;
}

.delete-btn {
  width: 18px;
  height: 17px;
  background: url("delete-icn.svg") no-repeat center;
}

.description span {
  display: block;
  font-size: 14px;
  color: #43484D;
  font-weight: 400;
}

.description span:first-child {
  margin-bottom: 5px;
}

.description span:last-child {
  font-weight: 300;
  margin-top: 8px;
  color: #86939E;
}

is-active {
  animation-name: animate;
  animation-duration: .8s;
  animation-iteration-count: 1;
  animation-timing-function: steps(28);
  animation-fill-mode: forwards;
}

@keyframes animate {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: right;
  }
}

.quantity {
  padding-top: 20px;
  margin-left: 150px;
}

.quantity input {
  -webkit-appearance: none;
  border: none;
  text-align: center;
  width: 32px;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
}

#minus-btn,
#minus-btn1 {
  margin-bottom: 3px;
  margin-top: 2px;
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

#plus-btn,
#plus-btn1 {
  margin-top: 2px;
  width: 30px;
  height: 30px;
  background-color: #E1E8EE;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

button:focus,
input:focus {
  outline: 0;
}

#price,
#price1 {
  margin-left: 100px;
  width: 83px;
  padding-top: 27px;
  text-align: center;
  font-size: 16px;
  color: #43484D;
  font-weight: 300;
  border: none;
}
<div class="item" th:each="el : ${session.cart}">
  <div class="image">
    <img th:src="${session.cart['img']}" alt="" />
  </div>
  <div class="description">
    <span th:text="${session.cart['name']}"></span>
    <span th:text="${session.cart['item_size'] != null} ? ${session.cart['item_size']}"></span>
    <span th:text="${session.cart['color']}"></span>
  </div>
  <div class="quantity">
    <button id="plus-btn" type="button" name="button">
      <img src="plus.svg" alt="" />
    </button>
    <input id="cart_quantity" th:value="${session.cart['quantity']}" />
    <button id="minus-btn" type="button" name="button">
      <img src="minus.svg" alt="" />
    </button>
  </div>
  <input type="number" id="price" th:value="${session.cart['price']}" readonly/>
  <div class="buttons">
    <form th:action="'/cart/remove'" method="post">
      <button class="delete-btn" type="submit"></button>
    </form>
  </div>
</div>

при delete-btn{ margin-left - кнопка '-' спускается вниз

1
  • сделайте пример таким как на картинке, что ви прикрепили. В текущем примере ничего не разваливаться. 9 фев в 8:00

1 ответ 1

0

Решение простоe: кнопкам + и - установить значение absolute

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.