html - Li 在具有最大宽度的 div 中内联显示

Question

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

你好，我有之前的代码。我的 div 有一个最大尺寸，我想显示内联的 li，但在行的末尾，我不希望包含图标的图标与其在同一个 li 中的文本分开。

在我的 CSS 中，我有以下内容:

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

我试着把 : white-space: nowrap;到 li，但它在 IE 中不起作用。

这是我的代码的一个 jsfiddle:http://jsfiddle.net/wSTQy/1/在这个例子中，“另一个 Action ”不在其图标的同一行。如果我添加空白:nowrap；它不会在 IE6 中工作了

Answer 1

将文本对齐添加到 ul 是否实现了您想要的效果？

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

根据新信息更新

将 li 的显示更改为 inline-block 而不是 inline (需要 IE7 及以下版本的破解)似乎有效，即使没有 white-space: nowrap;

更新的 fiddle (包括 hack):here