Question

请查看附件中的图像，它更易于理解。

通常，问题是如何将元素绝对定位到左侧：100％，同时使其看起来小于100％。保证金似乎无法绝对定位。

我使用jQuery创建了一个可调整大小的元素，并且有一个供用户调整元素大小的右“项目符号”。我不想让项目符号位于容器边界的顶部，所以我将其位置设置为绝对，然后离开：98％。

问题是-调整元素的大小会根据容器的大小将子弹移到容器末端的左侧或右侧（因为子弹的位置以百分比设置）。唯一的“解决方案”是将其“左侧”设置为100％，但是子弹位于div的顶部。在子弹后面添加一个不间断的空格也不起作用，因为我必须将左侧设置为包含子弹和空格的98％。

您怎么看？有没有我没有想到的简单解决方案？

预先感谢，厄默尔Image

编辑：吉拉（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，但显然不起作用希望它可以帮助其他人并感谢吉拉

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。

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

2 个答案: