Как установить «влево» элемента, расположенного внутри динамического элемента - PullRequest
Новая
       9

Как установить «влево» элемента, расположенного внутри динамического элемента

0 голосов
/ 03 сентября 2018

Пожалуйста, посмотрите на прикрепленное изображение, оно облегчает понимание.

В общем вопрос заключается в том, как установить абсолютное положение левого элемента: 100%, при этом он будет казаться чуть менее 100%. Похоже, маржа не работает в абсолютном позиционировании.

Я создал изменяемый размер элемента с помощью jQuery, и для пользователя есть правильная «пуля» для изменения размера элемента. Я не хочу, чтобы маркер был над границей контейнера, поэтому я установил его положение на абсолютное и оставил: 98%.

Проблема в том, что изменение размера элемента приводит к смещению маркера слева или справа от конца контейнера, в зависимости от его размера (поскольку положение маркера задается в процентах). Единственное «решение» - установить его «влево» на 100%, но тогда пуля находится на вершине div. Добавление неразрывного пробела после пули также не сработало, поскольку мне пришлось установить левое значение 98%, чтобы оно содержало и пулю, и пробел.

Что ты думаешь? Есть ли простое решение, которое я не придумал?

Спасибо заранее, Омер Изображение

Редактировать: Джила предложил простое решение использования calc: 

#myContainer {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
}

#bullet-right {
    position: absolute;
    left: calc(100% - 16px);
    margin-right: 10px;
    top: 40%;
    color: blue;
    z-index: 5;
}

Я пробовал 100% - 10px без калькуляции, и это не сработало. Надеюсь, что это может помочь другим, и спасибо Джила

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

как установить абсолютное положение элемента слева: 100%, при этом он будет казаться чуть менее 100%.

Не используйте left: 98%;. Используйте right: --;. Поскольку, как вы заявляете, проценты являются динамическими, выберите фиксированное значение для смещения элемента. Например, если вы выберете 10px, элемент справа будет right: 10px, а элемент слева будет left: 10px;.

Если вы действительно хотите использовать left для нужного, используйте left: calc(100%-10px);, но нет реальной причины делать это, когда вы можете использовать right.

0 голосов
/ 03 сентября 2018

left работает только на позиционированном элементе . То есть любой элемент, который не имеет позиционирования static по умолчанию. В дополнение к этому вы никогда не должны устанавливать left: 98%; Вы должны установить right: 2%, чтобы избежать путаницы.

Если вы хотите установить левое смещение для динамического элемента, вы ищете margin-left.

Это можно увидеть в следующем: 

.container {
  border: 1px solid black;
  padding: 20px;
}

.text {
  border: 1px solid black;
  margin-left: 5%;
  padding: 5px;
  display: inline-block;
  width: 85%;
}

input {
  margin-left: 2.5%;
}
<div class="container">
  <input type="radio">
  <div class="text">Text</div>
</div>
...