如何设置位于动态元素内的元素的“左”

Question

请查看附图，以便于理解。

一般来说，问题是如何绝对定位一个元素：100％同时使它看起来略低于100％。保证金似乎没有绝对定位。

我用jQuery创建了一个resizeble元素，并且有一个正确的“子弹”供用户调整元素的大小。我不想把子弹放在容器的边框上，所以我把它的位置设置为绝对位置，然后离开：98％。

问题是 - 调整元素大小会将子弹带到容器末端的左侧或右侧，具体取决于其大小（因为项目符号的位置以百分比形式设置）。只有'解决方案'是将其'左'设置为100％，然后子弹位于div的顶部。在子弹后添加一个不间断的空间也不起作用，因为我必须将左侧设置为98％以包含项目符号和空格。

你怎么看？有没有一个我没想出的简单解决方案？

在此先感谢，OmerImage

编辑：Jila在这里提供了一个使用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之前没有使用计算结果它显然不起作用希望它可以帮助其他人并感谢Jila

Answer 1

left只适用于positioned element。也就是说，任何没有默认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>

Answer 2

如何绝对定位一个元素：100％同时使它看起来有点小于100％。

不要使用left: 98%;。使用right: --;。因为，正如您所述，百分比是动态的，因此决定元素偏移的固定值。例如，如果选择10px，则右侧的元素为right: 10px，左侧的元素为left: 10px;。

如果你真的想在left上使用left: calc(100%-10px);，那么当你可以使用right时，没有真正的理由这样做。