CSS - 不要将span内容包装在固定宽度的表格单元格中

Question

我遇到固定宽度表格单元格和跨度元素的问题（内部有其他元素，文本+按钮）。我不希望包裹那些span内容（span元素放在那个单元格中），如下所示：

<td style="width: 250px;">
  <span>Test<button>Remove</button></span>
  <span>Test<button>Remove</button></span>
  ...
</td>

如何实现这一目标？我尝试使用空格但没有成功（跨度内容不会换行，但表格单元格不再是固定宽度......）（http://jsfiddle.net/dvjq4/）。

Answer 1

您只需将跨度设置为显示块：

http://jsfiddle.net/hQCwW/1/

.ex-element { 
display: block; }

Answer 2

尝试将表格包装在某个包装div中，然后在div上设置overflow:auto和white-space: nowrap;。

<强> FIDDLE

CSS

.wpr {
    width: 250px;
    overflow: auto;
    display:block;
    white-space: nowrap;
    border: 1px solid black;
}

Answer 3

我找到了一个解决方案（灵感来自Matthew Trow）。

Span元素类（在示例.ex-element中）必须看起来：

.ex-element {
    display: inline-block;
}

Answer 4

尝试删除white-space：nowrap;来自span元素。

.ex-element {
   /* white-space: nowrap; */  
}

Fiddle