title: Li display inline within a div that has max width
body: <pre><code>&lt;div class="actions-wrapper"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a class="" href="#answer-form"&gt;
                              &lt;img src="images/icons/answer.gif" class="answer-icon icon"/&gt;
                          &lt;/a&gt;
                          &lt;a class="" href=""&gt;
                              Action1
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a class="" href=""&gt;
                              &lt;img src="images/icons/answer.gif" class="answer-icon icon"/&gt;
                          &lt;/a&gt;
                          &lt;a class="" href=""&gt;
                              Action2
                          &lt;/a&gt;
                      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Hello, I have the previous code.
  My div has a max size, and i want to display the li inline, but at the end of the line, i dont want the  containing the icon to be separated from its text within the same li.</p>
  
  <p>In my css i have the following : </p>
  
  <pre><code>.actions-wrapper  ul { line-height: 25px;padding: 0; margin:0; list-style-position: outside; list-style-type: none;display: block; }
  .actions-wrapper ul li    { display:inline; margin-right: 12px;padding:3px 0;}
  </code></pre>
  
  <p>I have tried to put : white-space: nowrap; to the li, but it doesnt work in IE.</p>
  
  <p>Here's a jsfiddle of my code : <a href="http://jsfiddle.net/wSTQy/1/" rel="nofollow">http://jsfiddle.net/wSTQy/1/</a>
  In this example the "Another action" is not on the same line of its icon.
  If i add the white-space : nowrap; it wont work anymore in IE6</p>