Javascript 将中间div向左移动会在其右侧留下空白

包装器div中有三个div元素，如下所示：

<div class="wrapper-div">
    <div class="left-div">
        Hi
    </div>
    <div class="middle-div">
        Hello
    </div>
    <div class="right-div">
        Bye
    </div>
</div>

现在我希望中间div显示为左div中文本的上标。为了实现这一点，我将下面的CSS应用于中间div

.middle-div {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
    background-color: green;
    font-size: 8px;
    position: relative;
    left: -45px;
    top: -5px;
}

这会使中间div显示为左div的上标，但在中间div的原始位置会留下不需要的空白

你能帮我修一下吗

---

注意：在我最初的问题中，我有一个不受控制的可变div数，我希望每一个div都作为上一个div的上标。

不要使用定位：使用负边距

.wrapper div{
显示：内联块；
}
.左分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景色：红色；
}
.中分区{
显示：内联块；
宽度：20px；
高度：10px；
背景颜色：绿色；
字号：8px；
左边距：-35px；
右边距：0；
垂直对齐：顶部；
}
.右分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景颜色：蓝色；
}

你好
你好
拜伊

不要使用定位：使用负边距

.wrapper div{
显示：内联块；
}
.左分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景色：红色；
}
.中分区{
显示：内联块；
宽度：20px；
高度：10px；
背景颜色：绿色；
字号：8px；
左边距：-35px；
右边距：0；
垂直对齐：顶部；
}
.右分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景颜色：蓝色；
}

你好
你好
拜伊

我认为将“superscript”div作为subdiv更为正确（也让您不那么头疼），如下所示：

<div class="left-div">
    Hi
    <div class="middle-div">
        Hello
    </div>
</div>

你好
你好

---

这将更容易在代码中阅读，也更容易在定位方面进行控制。

我相信将“上标”div作为如下子div会更正确（也不会让您太头疼）：

<div class="left-div">
    Hi
    <div class="middle-div">
        Hello
    </div>
</div>

你好
你好

---

这将更容易在代码中读取，也更容易在定位方面进行控制。

如果无法更改div结构（将中间部分放在左侧内部），则可以将包装器放置在

位置：相对
，而将中间div放置在
位置：绝对
。
它将提供：

.wrapper-div {
   display: inline-block;
   position:relative;
}

.middle-div {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
    background-color: green;
    font-size: 8px;
    position: absolute;
    left: 20px;
    top: 2px;
 }

这是一个代码笔：
如果无法更改div结构（将中间部分放在左侧），则可以将包装器放在
位置：相对
，将中间div放在
位置：绝对
。
它将提供：

.wrapper-div {
   display: inline-block;
   position:relative;
}

.middle-div {
    display: inline-block;
    width: 20px;
    height: 10px;
    margin-right: 10px;
    background-color: green;
    font-size: 8px;
    position: absolute;
    left: 20px;
    top: 2px;
 }

这是一个代码笔：
将包装器设置为
位置：相对和
显示：flex
然后，您可以简单地将中间div设置为
absolute
，如下所示，以实现上标效果


.wrapper div{
显示器：flex；
位置：相对位置；
}
.左分区{
显示：内联块；
宽度：50px；
高度：20px；
背景色：红色；
位置：相对位置；
右边距：0；
}
.中分区{
显示：块；
宽度：20px；
高度：10px；
背景颜色：绿色；
字号：8px；
位置：绝对位置；
左：25px；
顶部：2个；
}
.右分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景颜色：蓝色；
}

你好
你好
拜伊
将包装设置为
位置：相对和
显示：flex
然后，您可以简单地将中间div设置为
absolute
，如下所示，以实现上标效果


.wrapper div{
显示器：flex；
位置：相对位置；
}
.左分区{
显示：内联块；
宽度：50px；
高度：20px；
背景色：红色；
位置：相对位置；
右边距：0；
}
.中分区{
显示：块；
宽度：20px；
高度：10px；
背景颜色：绿色；
字号：8px；
位置：绝对位置；
左：25px；
顶部：2个；
}
.右分区{
显示：内联块；
宽度：50px；
高度：20px；
右边距：10px；
背景颜色：蓝色；
}

你好
你好
拜伊
使用负边距代替顶部/左侧使用负边距代替顶部/左侧。你一直是救世主@不确定。它完全按照我想要的方式工作。：）将在我的完整html页面上尝试它now@abhishek08aug没问题。你一直是救世主@不确定。它完全按照我想要的方式工作。：）将在我的完整html页面上尝试它now@abhishek08aug没问题