具有相同CSS左值的Bootstrap按钮不在同一行中绘制

Question

I have an image as indicated below

I have to add buttons to the end of each of the six image lines upon page load. I added my first button and managed to manipulate the top and left css styles using jquery to get the button into it's proper place. Up to this point everything is working as expected and the button stays in place when resizing the screen etc. When however adding a second button and using the same left style as with the first one I'm running into an issue where the first button is drawn more to the left, even though it has the same left style as the second button. For example

I logged the left values of both buttons as I resized to the console, as seen from the below image the values are the same

Here is my 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>

and here is my javascript function used to place the buttons in the correct positions

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

Is this working? I see that you are using position:relative , so they already start with a different position. Because there are standing next to each other.

With display:block you can be sure that they have the same position left.

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

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

Beside that, why are you doing relative and not absolute ?