javascript - CSS float 被反转

Question

我想将类名 rangechart_box 的 div 放在右上角的范围 slider 中，但是当我使用 display: inline-block 和 float: right 一起是向下反转的，要放到右上角的range slider怎么办？

演示:https://jsfiddle.net/g4xx50Ld/3/

我想要它，但是在类名 rangechart 中有 float:right 并且没有 margin-right:-5px :https://jsfiddle.net/g4xx50Ld/4/

#slider-range{
    width:100%;
    margin: 0 auto;
  background: #000;
  height: 6px;
}
.rangechart_box {
    position: relative;
    top: 6px;
}
.rangechart {
    background: #ea8755;
    display: inline-block;
    width: 20%;
    //margin-right: -5px;
    float: right;
}

<div class="rangp" style="width: 100%;">
	<div class="rangechart_box">
		<div class="rangechart" style="height: 14px;"></div>
		<div class="rangechart" style="height: 18px;"></div>
		<div class="rangechart" style="height: 24px;"></div>
	</div>
  <div id="slider-range"></div>
</div>

我希望它在顶部和右侧没有空格

Answer 1

新编辑 3:https://jsfiddle.net/g4xx50Ld/12/

.rangechart_box {
    text-align: right;
}

注意

 <div class="rangechart_box"><div class="rangechart" style="height: 14px;"
    ></div
    ><div class="rangechart" style="height: 18px;"></div
    ><div class="rangechart" style="height: 24px;"></div>
  </div>

您必须去掉 div 之间的空格。 您可以阅读更多here .