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

据我所知，我正在尝试将单元格宽度与其内容相匹配：

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

这与我们所看到的效果相当好。然而，通过将twitter引导按钮组添加到一个单元格中，该单元格的宽度应与其内容相适应，按钮仍将在单元格之间环绕

如何防止我的纽扣被裹住？我还是想把它们排成一行

编辑

---

我希望保持表的宽度为100%，因此删除单元格1%的宽度不是一个解决方案。此外，从引导的

.btn group>.btn

中删除浮动将在“我的按钮”之间带来空间，只要标签标签之间有空间，甚至是不需要的但可以接受的空间。

如果删除浮动属性，它们将水平对齐。 在表格单元格上设置1%的宽度对于浮动元素来说是不够的。如果你增加到百分之五十，它们会水平对齐。
参见此处测试，td为50%：

两种选择：

删除.btn上的浮动属性

或者增加表格单元格宽度td.fit/set width以自动/删除宽度

订正答复：

内联块解决方案有点粗糙--恢复字体大小是不可靠的b/c你不能说“从两个级别上继承”，你必须显式地设置它

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

.btn组{display:flex；}

…另一个用户回答。详细说明：使用

display:flex

工作b/c flex相关属性的默认值

flex direction

（默认的“行”表示水平流）、

调整内容（默认的“flex start”表示项目打包到行的开头）和
flex wrap
（默认的“nowrap”）完成用例


旧答案：

在按钮上使用显示：内联块。这样做的一个副作用是，标记之间的任何空白都将呈现为按钮之间的可见空间，因此您必须对字体大小执行以下小技巧：

.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及更早版本。否则，支持是相当好的：

另外，为了响应不同的设备外形因素，您可能需要设计一个比.btn group更优雅的替代组件。
我知道这可能很旧，但这是我想到的解决方案

我将
btn组对齐
类和设置的宽度添加到
btn组
-DIV。
我只是将宽度设置为两个按钮所需的宽度，以适合其内容

<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组的宽度设置为子项宽度的总和，或者，将最大按钮宽度乘以子按钮的数量。
添加此css删除将解决表格单元格包装按钮组的任何问题

.btn-group {
  display: flex;
}

说明：
这定义了一个flex容器；内联或块，取决于给定的值。它为其所有直接子级启用flex上下文。默认情况下，flex项目将全部尝试放在一行上。
Thx此操作有效。但是，在标签标签之间添加空格时，它看起来不正确。这可能就是他们开始让它浮动的原因。顺便说一句，之所以这样做，是因为当宽度不够大时，浮动到某个方向的元素会向下缠绕。我建议选择选项（2）。在这种情况下，没有理由将宽度设置为1%。顺便说一句空白：nowrap和float不能一起工作。在这种情况下，我不会弄乱引导CSS。忘了提到我的表是100%宽度，所以删除宽度是断章取义的，因为它会产生我想要避免的副作用：删除浮点，它将使用display:inline block Than。您的答案令人困惑。与其给出解决方案代码并讨论解决方案，不如给出问题代码并讨论如何解决问题。你是
false（false）
，而不是
true
。这有效+1。这是什么类型的css？无礼？我得把它打开。对，很抱歉。本能。另请参阅更新后的答案。请使用链接解释此代码的工作原理，不要只给出代码，因为解释更有可能帮助未来的读者。我认为这是非常不言自明的，因为它是css，处理被询问的类。。这一次就完全解决了这个问题。我补充了一个解释。这是最简单最优雅的答案。请删除你的反对票。如果你能解释一下为什么
display:flex很有帮助，因为不太清楚它为什么会修复问题。在我的情况下，我必须将其添加到
.btn工具栏
中，以防止
之间出现换行。btn组
元素我再次访问我的旧问题。您首先添加了flex解决方案，由于flex现在得到了很好的支持，我将公认的答案改为您的答案。
.btn-group {
  display: flex;
}