列表中的图像未正确显示(好像在表格中），如何做到这一点

image in a list not being displayed correctly(as if in table), how to do that

本文关键字：表格 何做 这一点 图像 显示 列表      更新时间：2023-09-26

我有这样的代码： 

<ul>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
   <li>some text <img src="path" style="height:15px;width:25px;" /></li>
</ul>

我想要的是，"一些文本"和 img 应该整齐地出现，就好像它们是表格中的 2 列一样。另外，如果文本像"ab"一样小，那么图像不应该改变它的位置，我的意思是，不应该靠近，它应该总是像"一些文本"之后的一些 80px 一样在很远的距离。并且，如果文本长度超过 80，img 应该只在文本之后。 如有必要，将提供更多信息。
谢谢 

<li><span style="min-width:80px; display: inline-block;">some text</span>
<img src="path" style="height:15px;width:25px; float:left;" /></li>

这将起作用...

您可以通过在

列表项和一些 CSS 中添加几个 span 标记来解决此问题，如下所示：

<style type="text/css">
li {
    clear: left;
}
li span {
    display:block;
    float: left;
    width: 140px;
}
li img {
    float: left;
}
​
</style>
<ul>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text bla bla bla</span><img src="path" style="height:15px;width:25px;" /></li>
    <li><span>some text</span><img src="path" style="height:15px;width:25px;" /></li>
</ul>​

您可以在此处查看其结果：http://jsfiddle.net/magnusohlin/xhLmx/

相关文章：