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

【问题标题】：Li display inline within a div that has max widthLi 在具有最大宽度的 div 内显示内联
【发布时间】：2011-04-19 22:57:51
【问题描述】：

<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/ 在此示例中，“另一个操作”不在其图标的同一行上。如果我添加空格： nowrap;它在 IE6 中不再工作了

【问题讨论】：

请为您的代码创建一个jsFiddle test case。您可以使用http://dummyimage.com/ 将图标替换为.. 虚拟图像。

标签： html css

【解决方案1】：

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

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

新信息后更新

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

更新小提琴（包括 hack）：here

【讨论】：

好吧，在小提琴之前很难想象，但我现在用更新的小提琴更新了我的答案
行内块很好用。我倾向于不使用 inline 块，因为它在 IE 中不起作用，但我没有想到 hack。
不客气，内联块的 IE7 解决方法不必在 hack 中，如果你有一个 IE 条件 CSS，你可以把显示内联规则放在那里（没有!ie7 位），只要它位于单独的规则集中并位于主 CSS 之后；）

【解决方案2】：

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

为什么不用css在文字旁边添加图标，像这样：

行动1

使用 CSS： #图标标签{ 背景：透明 url(path/to/image) no-repeat x y; }

【讨论】：

带有一些左边的填充以使文本远离图像
好 o'l padding-left。谢谢 shanethehat
这也行，但因为我的图标是 famfamfam 图标，所以我用另一种方法更容易。

【解决方案3】：

您可以通过删除锚点之间的所有空白并用&nbsp; 分隔它们来做到这一点。

【讨论】：

【解决方案4】：

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

【讨论】：