prevent linebreaks between two elements

I have this html with css: http://jsfiddle.net/krhxG/

I set the width of the div to 20px in purpose in order to explain what I need.

How can I prevent from the submit button to break the line?

I want both the controls to be as one without line breaks at all. How can I d开发者_如何转开发o it?

---

How can I prevent from the submit button to break the line?

With a white-space: nowrap; on the parent <div> See updated jsfiddle.

---

In your container div, you need a white-space property:

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

---

Expanding on @BalusC answer in some weird cases (e.g. html generated and inserted by JavaScript) you also may want to try to insert a zero width joiner:

.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>