在 ol 的 li 内浮动图像，向左显示文本，在 Chrome 中工作，而不是 IE/FF答案

【问题标题】：Float image right within li of ol, text left, works in Chrome, not IE/FF在 ol 的 li 内浮动图像，向左显示文本，在 Chrome 中工作，而不是 IE/FF
【发布时间】：2015-06-22 03:48:10
【问题描述】：

我想要一个有序列表，其中左侧的文本和右侧的每个 li 的图像。所以我将图像浮动到右边，它把图像正确地放在右边，把文本放在左边，但是在 IE 和 FF 中图像太低了 14 像素。 Chrome 做得对。在我看来，这似乎是 IE 和 FF 将浮动放在每个 LI 的外部或下方，而不是放在它应该在的内部（如 Chrome）。如果我为 IE 和 FF 调整位置 -14px（向上），它对它们来说效果很好，但是 Chrome 就搞砸了。 14px 是每个 LI 的高度，这就是该技巧有效的原因。

除非绝对需要，否则我不想要单个浏览器 hack（即，为 IE/FF 设置 -14px 偏移量并告诉 Chrome 忽略它）。

#top25list{
       width:185px;
       cursor:n-resize;
       list-style:
       decimal inside;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list img{
       border:none;
       height:13px;
       width:13px;
       float:right
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

李的没什么特别的：

<li id=##>Name <a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a></li>

看到第一个 LI 没有 FF/IE 的图像，因为它在下方（看起来像是在 #2 的位置），而 #25 的图像不在列表的底部。

我希望这 3 个都看起来像 Chrome。有一些 JavaScript 生成 OL/LI，class=removeTeam 仅用于 jQuery 操作。此列表在 jQuery 可排序中，我确实使用 jQuery (.disableSelection();) 禁用了列表选择。我认为这与 jQuery 或 JavaScript 无关，只是简单的 CSS。

【问题讨论】：

标签： css image html-lists css-float listitem

【解决方案1】：

这是 IE 和 Firefox 共有的 bug。要解决此问题，您必须将图像移动到其行中的任何非浮动文本之前。

<li id=##>
   <a href="#" rel="##" class="removeTeam">
      <img src="/images/button-x.png" alt="Remove Name">
   </a> 

   Name
</li>

【讨论】：

【解决方案2】：

如果您无法更改 HTML，您可以尝试定位而不是浮动。


#top25list li{
  margin:0;
  padding:0 3px 10px 3px; /* add padding-right to make room for the image */
  background-color:#FFF;
  border-top:1px solid #990100;
  border-bottom:1px solid #990100;
  position: relative; /* for img to have position  */
}

#top25list img{
  border:none;
  height:13px;
  width:13px;
  position: absolute;
  top: 0;  
  right: 0; 
}

我没有测试过，如果我错了，请告诉我。

【讨论】：

【解决方案3】：

list-style: inside 搞砸了。

以下是有效的代码。我将浮点数移至 #top25list a 并将其移至名称之前。

#top25list{
       width:185px;
       cursor:n-resize;
       padding:0;
       margin:0
}
#top25list li{
       margin:0;
       padding:0 3px;
       background-color:#FFF;
       border-top:1px solid #990100;
       border-bottom:1px solid #990100
}
#top25list a{float:right;}
#top25list img{
       border:none;
       height:13px;
       width:13px;
}
#top25list li:hover{
       background-color:#990100;
       color:#FFF
}

<ul id="top25list">
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
    <li><a href="#" rel="##" class="removeTeam"><img src="/images/button-x.png" alt="Remove Name"></a>Name </li>
</ul>

【讨论】：