在 HTML 中的表格单元格内保持按钮和文本字段水平水平答案

【问题标题】：Keeping a button and text field horizontally level inside a table cell in HTML在 HTML 中的表格单元格内保持按钮和文本字段水平水平
【发布时间】：2015-06-17 21:50:29
【问题描述】：

我正在尝试创建一个表格，其中在最左侧列的单元格内有一个由<input> 标记定义的按钮和一个由<td> 标记定义的文本字段。更具体地说，下面是表中每一行的实际 html。

<td width="10%" ><input  style = "font-size: 12px;"  type="submit" name="expand" value="+"/>{$SPName}</td>

我的问题是当文本字段长于单元格可以容纳的时间时，按钮最终位于文本字段上方。我想要的是按钮始终位于文本的左侧，无论文本多长。溢出的文本可以环绕在按钮下方和文本的第一部分。有人有什么建议吗？

【问题讨论】：

标签： html css button input html-table

【解决方案1】：

您可以在表格单元格上使用 css 属性 'white-space:nowrap'。

<td width="10%" style="white-space:nowrap"><input  style = "font-size: 12px;"  type="submit" name="expand" value="+"/>{$SPName}</td>

【讨论】：

您好，感谢您的回复！对此，我真的非常感激。这有助于解决问题，但我的表有很多列，所以我不知道从长远来看这是否是完美的解决方案......你知道是否有任何方法可以让文本仍然换行，但会保留按钮和正文的第一部分在同一行？？

【解决方案2】：

我使用了一个单词中断，它可以在任何字符之后中断。我不是 100% 确定这是您所要求的，但我相信它至少会有所帮助。

div.test {
    width: 11em; 
    word-break: break-all;
}

&lt;div class="test"&gt;&lt;td width="10%"&gt;&lt;input style = "font-size: 12px;" type="submit" name="expand" value="+"/&gt;{$SPName}&lt;/td&gt;&lt;/div&gt;

【讨论】：

不幸的是，即使添加了这些，问题仍然存在。不过，我感谢您的帮助！