css - 尝试将按钮 float 到右侧时出现意外行为

Question

我正在尝试将按钮移动到我的 My fiddle 图表上方在右侧。

在下面显示的 ID 为 range-butts-index 的 div 中，我尝试使用 pefBut 类，但是当我这样做时，按钮消失了。当我删除类(class)时，按钮会在左侧返回。我不明白为什么这个类让按钮消失？

html

<div id="IndexArea">
        <div id="range-butts-index" class='perfBut'>
            <button class="ui-button ui-widget ui-corner-all" data-range="5">5d</button>
            <button class="ui-button ui-widget ui-corner-all" data-range="20">MTD</button>
            <button class="ui-button ui-widget ui-corner-all" data-range="999">Max</button>
        </div>
        <div id="chartIndexPerf"/div>
</div>

CSS

.perfBut {
 float: right;
}

Answer 1

添加这个而不是 float: right:

.perfBut {
  display: grid;
  grid-auto-flow: column;
  justify-content: right;
}

你可以在这里看到结果: https://jsbin.com/yugoliduya/edit?css,output