1

Пытаюсь реализовать кнопку удаления. Вся проблема заключается в неправильном css, при масштабировании страницы, либо изменения размеров окна браузера, крестики выходят из элемента li и я понимаю почему, но написать правильный css не получается. Прошу помощи.

HTML

<ul>
   <span class='close'>крестик</span>
   <li>Item</li>
</ul> 

CSS

.close::after {
    content: '\2716';
    position: absolute;
    cursor: pointer;
    margin-left: 600px;
    padding: 1.07em 0px;
}

Без изменения размера введите сюда описание изображения

С изменением введите сюда описание изображения

Крестики должны быть в красном блоке li, а не выходить за его пределы. Идеи?

5
  • Сделайте просто положение процентами, например 60%. Конечно, на одном месте крестики не будут, но и выходить из окна или налезать на текст тоже не будут. А почему вам так не нравится? Красиво смотрится
    – Ver Nick
    22 авг 2018 в 14:27
  • @Ver Nick с процентами та же проблема, ездят по всему li. Ну красиво не красиво не имеет смысла, просто нужно чтобы они были фиксированные в li, а если например я открою эту страницу на очень широким монитором, они вообще уедут фиг знает куда, это не хорошо)
    – user290664
    22 авг 2018 в 14:37
  • Попробуй добавить параметр отступа, раз объект - absolute. Например: right: 10px;
    – Ruslan
    22 авг 2018 в 14:53
  • А можете весь код показать? Не бойтесь, не украду ))
    – Ver Nick
    22 авг 2018 в 14:55
  • @VerNick, пробовал, после изменения экрана он уходит влево
    – user290664
    22 авг 2018 в 15:20

1 ответ 1

2

Поместите крестик в li и задайте ему(li) position: relative и будет он у вас размещаться относительно края li в независимости от его размера.

.container {
  margin: 25px;
  padding: 25px;
  border: 1px solid #eaeaea;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__item {
  position: relative;
  padding: 15px;
  background: #f7f7f7;
}
.list__item-remove {
  position: absolute;
  top: 50%;
  right: 25px;
  margin-top: -8px;
}
<div class="container">
  <ul class="list">
    <li class="list__item">Item <span class="list__item-remove">X</span></li>
  </ul>
</div>

А лучше сделайте полный пример, тогда будет более полный и наглядный ответ.

4
  • тоже пробовал, если поместить в li длинна текста будет сбивать крестик, вообщем та же проблема
    – user290664
    22 авг 2018 в 15:23
  • 1
    @karaname, обновил пример. Не знаю как вы делали, но все работает.
    – E_K
    22 авг 2018 в 15:40
  • понял ошибку свою, я забыл поставить в li relative, всё работает, спасибо!
    – user290664
    22 авг 2018 в 15:49
  • 2
    @karaname, на будущее - это один из возможных вариантов. Еще можно сделать с помощью float, flex, CSS Grids и таблиц.
    – E_K
    22 авг 2018 в 15:54

Ваш ответ

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