Question

在LI里怎么让文字左对齐图片右对齐

效果如图

Answer 1

如果你打算把后面的箭头图片直接放在HTML里的话； 用左右浮动；
例子：（把里面的span换成图片即可，兼容IE6,7,8,火狐）

<style type="text/css">
div,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none}
.new{ border:solid 1px #990033; width:200px; line-height:24px;}
.new li{ border-bottom:solid 1px #CCC; overflow:hidden;}
.new li a{ float:left;}
.new li span{ float:right}
</style>
<div class="new">
<ul>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
</ul>
</div>

其实像你上面的效果，用背景图片做最好，有简单，兼容性好等优点；

不过竟然没分.难怪没人答...呵呵.. 你好像还是我好友...巧....

Answer 2

如果你打算把后面的箭头图片直接放在HTML里的话； 用左右浮动；
例子:（把里面的span换成图片即可，兼容IE6,7,8，火狐）

<style type="text/css">
div,ul,li{ margin:0； padding:0；}
ul,li{ list-style:none}
.new{ border:solid 1px #990033； width:200px； line-height:24px；}
.new li{ border-bottom:solid 1px #CCC； overflow:hidden；}
.new li a{ float:left；}
.new li span{ float:right}
</style>
<div class="new">
<ul>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
<li><a href="#">1 燃气热水</a><span>图片</span></li>
</ul>
</div>

其实像你上面的效果，用背景图片做最好，有简单，兼容性好等优点；

不过竟然没分.难怪没人答...呵呵.. 你好像还是我好友...巧。