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;对李，但它在IE中不起作用。

这是我的代码的一个小问题：http://jsfiddle.net/wSTQy/1/ 在此示例中，“另一个操作”不在其图标的同一行。如果我添加白色空间：nowrap;它不再适用于IE6

Answer 1

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

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

在新信息

之后更新

将li的显示更改为inline-block而不是inline（需要IE7及以下版本的黑客攻击）似乎可行，即使没有white-space: nowrap;

更新了小提琴（包括黑客）：here

Answer 2

通过查看您的标记，您似乎希望图标和文本执行相同的操作。

为什么不使用css在文本旁边添加图标，如下所示：

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

Answer 3

您可以通过从锚点之间删除所有空格并使用 分隔它们来完成此操作。

Answer 4

我认为最简单的解决方案是将display:inline更改为float:left。这样，图标和文字永远不会分开。

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

4 个答案:

在新信息

更新了小提琴（包括黑客）：here