如何让<td>元素内的3个jimu-btn类按钮水平并排显示？

我在元素内放置了3个使用jimu-btn类的按钮元素，希望它们能在同一行显示。以下是我的HTML和CSS代码：

HTML代码 #

<div class="threeButtons">
            <div class="jimu-btn"
                style="height:38px;width:85px;display:block;margin-right: 110px;" 
                data-placement="bottom">Importer
            </div>
            <div class="jimu-btn"
                 style="height: 38px; width: 99px; display: block; margin-right: 120px;">Déplacer vers
            </div>
            <div style="float:right;height:38px;width:90px;display:block;margin-right: 10px;" class="jimu-btn">Désassocier
            </div>
</div>

CSS代码 #

.jimu-btn {
    padding: 5px 5px 5px 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 0px;
    min-width: 30px;
    background-color: #485566;
    color: #ffffff;
}

我是CSS新手，请问该如何实现这一需求？

解决方案 #

问题核心是你给每个按钮设置了display: block——块级元素默认会独占一行，要让它们同行显示，推荐以下几种方法：

方法1：改用inline-block（快速修改） #

直接把每个按钮内联样式里的display:block改成display:inline-block，这样元素既能保留宽高设置，又能在同一行排列：

<div class="threeButtons">
            <div class="jimu-btn"
                style="height:38px;width:85px;display:inline-block;margin-right: 110px;" 
                data-placement="bottom">Importer
            </div>
            <div class="jimu-btn"
                 style="height: 38px; width: 99px; display: inline-block; margin-right: 120px;">Déplacer vers
            </div>
            <div style="height:38px;width:90px;display:inline-block;margin-right: 10px;" class="jimu-btn">Désassocier
            </div>
</div>

注意：最后一个按钮可以去掉float:right，避免布局错位。

方法2：Flex布局（现代CSS方案，更推荐） #

不需要修改按钮的内联样式，给父容器threeButtons添加Flex属性，子元素会自动同行排列，还能轻松控制对齐方式：

.threeButtons {
    display: flex;
    align-items: center; /* 让按钮垂直居中 */
    /* 可选：用gap统一设置按钮间距，替代margin-right更灵活 */
    /* gap: 20px; */
}

如果需要最后一个按钮靠右对齐，给它加margin-left: auto即可：

<div style="height:38px;width:90px;display:block;margin-left:auto;margin-right: 10px;" class="jimu-btn">Désassocier</div>

这种方式代码更简洁，布局维护也更方便。

方法3：浮动布局（不推荐，易引发问题） #

如果一定要用浮动，给所有按钮添加float:left，同时给父容器清除浮动（防止父容器高度塌陷）：

<div class="threeButtons">
            <div class="jimu-btn"
                style="height:38px;width:85px;float:left;margin-right: 110px;" 
                data-placement="bottom">Importer
            </div>
            <div class="jimu-btn"
                 style="height: 38px; width: 99px; float:left; margin-right: 120px;">Déplacer vers
            </div>
            <div style="float:right;height:38px;width:90px;margin-right: 10px;" class="jimu-btn">Désassocier
            </div>
</div>

添加清除浮动的CSS：

.threeButtons::after {
    content: "";
    display: table;
    clear: both;
}

内容的提问来源于stack exchange，提问作者Amir