jquery - 具有相同 css left 值的 Bootstrap 按钮未绘制在同一行中

Question

我有一张图片如下所示

我必须在页面加载时将按钮添加到六个图像行中每一行的末尾。我添加了我的第一个按钮，并设法使用 jquery 操作 top 和 left css 样式，将按钮放到正确的位置。到目前为止，一切都按预期工作，并且在调整屏幕大小时等按钮保持在原位。然而，当添加第二个按钮并使用与我遇到的第一个按钮相同的 left 样式时第一个按钮绘制得更靠左的问题，即使它与第二个按钮具有相同的 left 样式。例如

当我调整到控制台时，我记录了两个按钮的左侧值，如下图所示，这些值是相同的

这是我的 HTML

<div id="vehicleContainer" class="ibox-content text-center">
    <button id="rdtLeftFrontTyreButton" class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-times"></i></button>
    <button id="rdtLeftRearInnerTyreButton" class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-times"></i></button>
    <img id="vehicleImage" src="~/content/RDT.png"/>
</div>

这是我用来将按钮放置在正确位置的 javascript 函数

function drawLayout() {
        var vehicleContainer = $("#vehicleContainer");

        var vehicleContainerHeight = vehicleContainer.height();
        var vehicleContainerWidth = vehicleContainer.width();

        var vehicleImage = $("#vehicleImage");

        // Set image height relative to the screen height
        var vehicleImageHeight = (vehicleContainerHeight * 98) / 100;
        vehicleImage.height(vehicleImageHeight);

        // Set image width relative to the screen width
        var vehicleImageWidth = (vehicleContainerWidth * 60) / 100;
        vehicleImage.width(vehicleImageWidth);

        var rdtLeftFrontTyreButton = $("#rdtLeftFrontTyreButton");
        var rdtLeftFrontTyreButtonTop = (vehicleContainerHeight * 39) / 100;
        var rdtLeftFrontTyreButtonLeft = (vehicleContainerWidth * -0.5) / 100;

        rdtLeftFrontTyreButton.css({
            position: "relative",
            top: -(rdtLeftFrontTyreButtonTop) + "px",
            left: -(rdtLeftFrontTyreButtonLeft) + "px"
        });

        console.log(rdtLeftFrontTyreButtonLeft);

        var rdtLeftRearInnerTyreButton = $("#rdtLeftRearInnerTyreButton");
        var rdtLeftRearInnerTyreButtonTop = (vehicleContainerHeight * 1.5) / 100;
        var rdtLeftRearInnerTyreButtonLeft = (vehicleContainerWidth * -0.5) / 100;

        rdtLeftRearInnerTyreButton.css({
            position: "relative",
            top: -(rdtLeftRearInnerTyreButtonTop) + "px",
            left: -(rdtLeftRearInnerTyreButtonLeft) + "px"
        });

        console.log(rdtLeftRearInnerTyreButtonLeft);
    }

Answer 1

这有用吗？我看到您正在使用 position:relative，因此它们已经从不同的位置开始。因为旁边站着。

使用 display:block，您可以确定它们的剩余位置相同。

rdtLeftFrontTyreButton.css({
  position: "relative",
  top: -(rdtLeftFrontTyreButtonTop) + "px",
  left: -(rdtLeftFrontTyreButtonLeft) + "px",
  display: "block"
});

rdtLeftRearInnerTyreButton.css({
  position: "relative",
  top: (rdtLeftRearInnerTyreButtonTop) + "px",
  left: -(rdtLeftRearInnerTyreButtonLeft) + "px",
  display: "block"
});

除此之外，您为什么使用relative 而不是absolute？