Html 我如何将三个按钮隔开，文本在左侧，按钮在右侧？

我尝试过一些不同的想法。首先，我把三个按钮和浮动左和浮动右。我还为文本添加了以下内容。但是文本没有对齐

<div style="
    display: inline-block;
    height: 40px;
    vertical-align: middle;
">194 rows retrieved - 194 displayed</div>

---

这是我创建的小提琴，问题是我希望按钮和文本在左边分组，另一个按钮在右边浮动。目前，它们的间距相等。

请删除

内联块

，仅替换为

内联块

。div的

inline

属性将使文本居中

下面的代码应该可以正常工作：

---

hello world检索到194行-显示194行

尝试使用

display:table cell

而不是关闭

display:inline block

请参见

.div{
高度：40px；
显示：内联块；
填充：10px 10px；
列表样式：无；
}
第一
二号
三号

只需使用两个左右浮动的容器即可

<div>
    <div class="leftGroup">
        <button>Left 1</button>
        <button>Left 2</button>
        <button>Left 3</button>
        <span>Some text</span>
    </div>
    <div class="rightGroup">
        <button>Right</button>
    </div>
</div>

---

你能创建Fiddle吗？我试过了，但它位于标记为float left的按钮下方。如果可能，你能告诉我如何使用左右两侧的按钮来创建Fiddle吗？我试过了，但似乎没把小提琴拉对。

.div{
height: 40px;
display:inline-block;
padding:10px 10px;
list-style:none;
}



<div class="div">number 1</div>
<div class="div">number 2</div>
<div class="div">number 3</div>

<div>
    <div class="leftGroup">
        <button>Left 1</button>
        <button>Left 2</button>
        <button>Left 3</button>
        <span>Some text</span>
    </div>
    <div class="rightGroup">
        <button>Right</button>
    </div>
</div>

.leftGroup {
    float: left;
}

.rightGroup {
    float: right;
}