Question

在尝试使用Javascript创建的图表时，我遇到了一个奇怪的问题。

<div id="jobCostChart" class="segbar" style="width: 100%; height: 30px;">
    <div class="item-wrapper" style="display: inline-block; height: 100%; width: 64.7059%; background-color: rgb(56, 142, 60); position: relative;">
        <span class="item-percentage" style="color: white;">$20,350.00</span>
    </div>
    <div class="item-wrapper" style="display: inline-block; height: 100%; width: 27.663%; background-color: rgb(76, 175, 80); position: relative;">
        <span class="item-percentage" style="color: white;">$8,700.00</span>
    </div>
    <div class="item-wrapper" style="display: inline-block; height: 100%; width: 7.63116%; background-color: rgb(129, 199, 132); position: relative;">
        <span class="item-percentage" style="color: white;">$2,800.00</span>
    </div>
</div>

这是它生成的图表的代码，它的外观如下：

一切都很好，但是我想要删除最后一个文本，但是当我在Javascript中以编程方式删除<span>时，它会出现如下：

我不能为我的生活搞清楚！一直在使用Chrome Dev工具尝试修复它，但没有运气。有人有什么想法吗？

非常感谢！

Answer 1

尝试将display: flex;添加到jobCostChart div

同时从item-wrapper

中删除内联块

请参阅更新的代码（删除不必要的样式）

＆＃13;

     <div id="jobCostChart" class="segbar" style="width: 100%; height: 30px;display: flex;">
        <div class="item-wrapper" style="width: 64.7059%; background-color: rgb(56, 142, 60);">
            <span class="item-percentage" style="color: white;">$20,350.00</span>
        </div>
        <div class="item-wrapper" style=" width: 27.663%; background-color: rgb(76, 175, 80);">
            <span class="item-percentage" style="color: white;">$8,700.00</span>
        </div>
        <div class="item-wrapper" style=" width: 7.63116%; background-color: rgb(129, 199, 132);">
            <span class="item-percentage" style="color: white;"></span>
        </div>
    </div>

＆＃13;

Answer 2

可能是一些css的问题。在任何情况下都要使它们具有响应性。

只需使用：

.mymaindiv{
width: the number of pourcentage I want;
display: flex;
}
.mydiv or .mymaindiv span{
width: fit-content;
width: -o-fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;

or if you want the two span to be the same width:

width: 50%;
}

我希望我能帮到你，

问候。

Answer 3

虽然您已使用display: inline-block，但尝试在所有内联屏蔽元素中添加另一条规则，即vertical-align: top/middle。你会得到适当的结果。享受编码。

Answer 4

从item-wrapper中删除inline-block并添加display：flex;到jobCostChart div

<div id="jobCostChart" class="segbar" style="width: 100%; height: 30px;display: flex;">
 <div class="item-wrapper" style="width: 64.7059%; background-color: rgb(56, 142, 60);">
    <span class="item-percentage" style="color: white;">$20,350.00</span>
 </div>
 <div class="item-wrapper" style=" width: 27.663%; background-color: rgb(76, 175, 80);">
    <span class="item-percentage" style="color: white;">$8,700.00</span>
 </div>
 <div class="item-wrapper" style=" width: 7.63116%; background-color: rgb(129, 190, 110);">
    <span class="item-percentage" style="color: white;">$2,800.00</span>
 </div>

Answer 5

您也可以尝试使用此代码

<div id="jobCostChart" class="segbar" style="display:flex; ; width: 100%;">
    <div class="item-wrapper" style="padding:10px 5px;width: 60%; background-color: rgb(56, 142, 60); position: relative;">
        <span class="item-percentage" style="color: white;">$20,350.00</span>
    </div>
    <div class="item-wrapper" style="padding:10px 5px; width: 30%; background-color: rgb(76, 175, 80); position: relative;">
        <span class="item-percentage" style="color: white;">$8,700.00</span>
    </div>
    <div class="item-wrapper" style="padding:10px 5px;width: 10%; background-color: rgb(129, 199, 132); position: relative;">
        <span class="item-percentage" style="color: white;">$2,800.00</span>
    </div>
</div>

<强> ===三江源===

CSS Div随机定位

5 个答案: