html - 使跨度达到浮动按钮的宽度

Question

所以在我的布局中，我将有一个主搜索栏和两个按钮。

就在下面有各种条目。哪一个有一个可点击的标题来显示它的内容和打开/关闭按钮。

这是一个 JSfiddle MVE（只有两个条目。）

由于标题是可点击的，我希望它们占据浮动按钮之前的所有剩余空间。

我尝试添加两个选项.entry_title：

.entry_title {
   display: inline;
   width: 100%;
}

但是这样标题实际上会占据一整行（因此将按钮移动到下一个）。我也尝试了所有其他display选项。

我已经尝试了其他答案（链接，链接）的解决方案，但无法使它们在我的设置中工作。

标签： htmlcss

Answer 1

跳过浮动并使用弹性框。只需添加到display:flex;.entry-bar 和flex-grow:1;.entry-title;

.entry_bar {
  display:flex;
}

.entry_title {
    background-color: green;
    user-select: none;
    flex-grow:1;
}