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

<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内的文本分开。Li显示内嵌在具有最大宽度的div内

在我的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;}

我试图把：空白：NOWRAP;到李，但它不适用于IE。

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

来源

2011-04-19 Kévin_Bransard

请做一个[jsFiddle测试用例]（http://jsfiddle.net/）你的代码。您可以使用[http://dummyimage.com/]（http://dummyimage.com/）将图标替换为..虚拟图像。 – thirtydot 2011-04-19 14:00:53

jsFiddle在我的问题上加了 – 2011-04-19 14:22:06

确实添加文字对齐到ul达到你想要的？

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

后的新信息

改变li到inline-block，而不是inline的显示更新（需要对IE7一个黑客及以下）似乎工作，即使没有white-space: nowrap;

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

来源

2011-04-19 14:06:07 clairesuzy

没有那个工作 – 2011-04-19 14:22:44

好吧，很难想象在小提琴之前，但我现在用更新的小提琴更新了我的答案 – clairesuzy 2011-04-19 14:46:30

好的内联块的作品。我倾向于不使用内联块，因为它不在IE中工作，但我没有想到破解。 – 2011-04-19 15:06:21

您可以通过从锚点之间删除所有空格并使用 。

来源

2011-04-19 14:06:14 shanethehat

通过查看你的标记，似乎你想让图标和文本做出相同的动作。

为什么不使用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; 
}

来源

2011-04-19 14:32:22 gutierrezalex

带有一些左填充以保持文本不在图像中 – shanethehat 2011-04-19 15:29:19

良好的填充左侧。谢谢shanethehat – gutierrezalex 2011-04-19 15:40:08

这也工作了，但因为我的图标是famfamfam图标，所以我更容易做另一种方法。 – 2011-04-21 08:04:54

我认为最简单的解决办法是改变display:inline到float:left。这样图标和文字就不会分开。

来源

2011-04-19 14:57:51 jeroen

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

回答

后的新信息

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

相关问题