使跨度达到浮动按钮的宽度答案

【问题标题】：Make span take width up to floating buttons使跨度达到浮动按钮的宽度
【发布时间】：2020-07-14 06:55:23
【问题描述】：

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

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

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

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

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

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

我尝试了其他答案的解决方案（link、link），但无法让它们在我的设置中工作。

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案2】：

尝试将您的 .entry_bar css 更改为：

.entry_bar {
  display: grid;
  grid-template-columns: 1fr max-content max-content;
}

我几乎不建议研究 CSS 网格。这是 css-tricks CSS -Grid Guide

的精彩指南

【讨论】：

【解决方案3】：

你可以使用弹性盒子

.entry_bar {
  display:flex;
}

.entry_title {
    flex: 1;
}

【讨论】：