防止两个元素之间的换行

Question

我有这个html与css：http://jsfiddle.net/krhxG/

为了解释我的需要，我将div的宽度设置为20px 如何阻止提交按钮断开线？
我希望两个控件都是一个没有换行的控件。我该怎么办？

Answer 1

  

如何阻止提交按钮中断？

父white-space: nowrap; See updated jsfiddle上有<div>。

Answer 2

在容器div中，您需要一个空格属性：

<div style="white-space:nowrap;">
<input type="text" /><input type="submit" value=""/>
</div>

Answer 3

在一些奇怪的情况下（例如，通过JavaScript生成和插入的html）扩展@BalusC答案，您也可能想要尝试插入零宽度的连接符：

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORD</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>