动态拟合单元格宽度后抑制按钮组中的按钮换行

Posted 2023-03-05

【中文标题】动态拟合单元格宽度后抑制按钮组中的按钮换行

【英文标题】：Suppress button wrap in button group after fitting cell width dynamically

【发布时间】：2014-06-04 23:07:08

【问题描述】：

根据MetalFrog's answer to this problem，我正在尝试使单元格宽度适合其内容：

tr td.fit 
width: 1%;
white-space: nowrap;

正如here (jsfiddle) 所见，这非常有效。但是，通过将 twitter-bootstrap 按钮组添加到应该适合其内容宽度的单元格，按钮仍将在它们之间折回。 jsfiddle。

如何防止我的按钮被包裹起来？我还是想把它们排成一行。

编辑 我想保持表格宽度为 100%，因此删除单元格的 1% 宽度不是解决方案。只要标签标签之间有空间，从引导程序的.btn-group > .btn 中删除浮动也会在我的按钮之间留出空间，即使是不需要的但可以接受。

【参考方案1】：

添加此 css decleration 将解决表格单元格包裹按钮组的任何问题。

.btn-group 
  display: flex;

说明： 这定义了一个弹性容器；内联或块取决于给定的值。它为其所有直接子级启用了弹性上下文。默认情况下，弹性项目将全部尝试放在一行中。

【讨论】：

请使用edit链接解释这段代码是如何工作的，不要只给出代码，因为解释更有可能帮助未来的读者。

我认为它是非常不言自明的 conisedring 它的 css 并处理被询问的类。这完全解决了它。我添加了一个解释。这是最简单最优雅的答案。请删除您的反对票。

如果你能添加一个关于为什么的解释会很棒 display:flex; 有帮助，因为目前还不清楚它为什么会解决问题。

这行得通，在我的情况下，我必须将它添加到我的.btn-toolbar 以防止在.btn-group 元素之间换行

我重新访问了我的旧问题。您首先添加了 flex 解决方案，并且由于现在很好地支持 flex，因此我将接受的答案更改为您的。

【参考方案2】：

修改后的答案：

inline-block 解决方案有点粗俗——恢复字体大小是不可靠的，因为你不能说“从两个级别上继承”，你必须明确设置它。

今天我将使用 flexbox，它可以消除项目之间的空白：

.btn-group display: flex;

...作为另一个用户的回答。详细说明：使用display: flex 使用 flex 相关属性的默认值 flex-direction（默认“行”表示水平流动），justify-content（默认“flex-start”表示项目被打包到开头行）和flex-wrap（默认“nowrap”）满足用例。

---

旧答案：

在按钮上使用 display: inline-block。这样做的副作用是标记中的任何空白都将呈现为按钮之间的可见空间，因此您必须使用 font-size 做这个小技巧：

.btn-group 
  white-space: nowrap; 
  font-size: 0; // inline-block will show ALL whitespace between elements, so shrink it!


.btn-group .btn 
  display: inline-block;
  font-size: 14px; // restore font-size to whatever you are using for button text.
  float: none;
  clear: none;

请注意，这不适用于 IE7 及更早版本。其他方面支持还不错：http://caniuse.com/#search=inline-block

此外，为了响应不同的设备外形尺寸，您可能想提出一个替代组件，它的包装比 .btn-group 更优雅。

【讨论】：

这工作 +1。这是什么类型的css？粗鲁？我不得不打开它。

对，对不起。直觉。另请参阅更新的答案。

【参考方案3】：

我知道这可能是旧的，但这是我找到的解决方案。

我向btn-group-DIV 添加了btn-group-justified 类和设置宽度。 我只是将两个按钮的宽度设置为适合其内容所需的宽度。

<td class="fit"  >
    <div class="btn-group btn-group-justified" style="width:136px">
         <a href="#" class="btn btn-second">Accept</a>
         <a href="#" class="btn btn-highlight">Deny</a>
    </div>
</td>

如果您的按钮是静态创建的，这将正常工作，但如果它们是动态生成的，您可以使用 javascript 将btn-group 的宽度设置为子项宽度的总和，或乘以最大按钮宽度乘子数量。

【参考方案4】：

如果您删除 float 属性，它们将水平对齐。 碰巧在表格单元格上设置 1% 的宽度不足以容纳浮动元素。如果您将其增加到 50%，它们将水平对齐。 请参阅此处测试 td 为 50%：http://jsfiddle.net/7zcHW/1/show

.btn-group > .btn, .btn-group-vertical > .btn 
    float: left;
    position: relative;

两种选择：

移除 .btn 上的浮动属性 或增加表格单元格宽度 td.fit / 将宽度设置为自动 / 移除宽度。

【讨论】：

谢谢这工作。 jsfiddle.net/wexdX/330 但是，在标签标签之间添加空格时，它看起来不正确。这可能是他们开始浮动它的原因。顺便说一句，这样做的原因是当宽度不够高时，浮动到一个方向的元素会向下包裹。

我建议选择选项（2）。在这种情况下，没有理由将宽度设置为 1%。 BTW white-space: nowrap 和 floats 不能一起工作。在这种情况下，我不会弄乱引导 CSS。

忘了提到我的表格是 100% 宽度，所以删除宽度是脱离上下文的，因为它会产生我想避免的这种副作用：jsfiddle.net/wexdX/332

比去掉float，会使用display:inline-block比。

您的回答令人困惑。与其给出解决方案代码并谈论解决方案，不如给出问题代码并谈论如何扭转问题。而不是true 你是false(false)。