Li display inline within a div that has max width

<div class="actions-wrapper">
                <ul>
                    <li>
                        <a class="" href="#answer-form">
                            <img src="images/icons/answer.gif" class="answer-icon icon"/>
                        </a>
                        <a class="" href="">
                            Action1
                        </a>
                    </li>
                    <li>
                        <a class="" href="">
                            <img src="images/icons/answer.gif" class="answer-icon icon"/>
                        </a>
                        <a class="" href="">
                            Action2
                        </a>
                    </li>
</ul>
</div>

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.

In my css i have the following :

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

I have tried to put : white-space: nowrap; t开发者_C百科o the li, but it doesnt work in IE.

Here's a jsfiddle of my code : http://jsfiddle.net/wSTQy/1/ 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

does adding the text-alignment to the ul achieve what you want?

.actions-wrapper  ul { 
  text-align: right;
}

Updated after new information

changing the display of the li to inline-block instead of inline (needs a hack for IE7 and below) seems to work, even without the white-space: nowrap;

Updated fiddle (with hack included) : here

By looking at your markup, seems you want the icon and the text to make the same action.

Why not use css to add the icon next to the text, like so:

<li>
    <a href="#answer-form" id="icon-label">
        Action1
    </a>
</li>

With the CSS:
#icon-label {
    background: transparent url(path/to/image) no-repeat x y;
}

You can do this by removing all the whitespace from between the anchors, and separating them with a  .

I think the easiest solution would be to change display:inline to float:left. That way the icons and the text never get separated.