<li>使用css设置样式(chrome问题)

Question

你好我用css有这个奇怪的问题.

我正在显示一个无序列表

  <ul>
   <li>
    <div class='align-left'>
     PMI
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='19' class="elim" name="19">
    </div>
   </li>
   <li>
    <div class='align-left'>
     GRANDS COMPTES
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='21' class="elim" name="21">
    </div>
   </li>
   <li>
    <div class='align-left'>
     associations
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='22' class="elim" name="22">
    </div>
   </li>
   <li>
    <div class='align-left'>
     PME
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='25' class="elim" name="25">
    </div>
   </li>
   <li>
    <div class='align-left'>
     ecoles privees
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='28' class="elim" name="28">
    </div>
   </li>
   <li>
    <div class='align-left'>
     organisme
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='32' class="elim" name="32">
    </div>
   </li>
   <li>
    <div class='align-left'>
     test
    </div>
    <div class='align-right'>
     <img src="/img/delete_icon2.png" id='34' class="elim" name="34">
    </div>
   </li>
  </ul>

现在这伴随着这些css规则:

.align-right{
float: right;
}
.align-left{
float: left;
}

在chrome上,列表中的项目符号实际上是项目符号的文本.

为什么我这样做,我希望图像从上到下对齐.

这是问题的截图

提前致谢.

Answer 1

您提供的代码不会导致此问题.

根据您的要求,添加

ul { list-style-type:none; }

要么

ul li { padding-left:40px; }

可以达到预期的效果.

编辑

尝试添加overflow:hidden;的li元素

我个人也是这样做的:

li { 
    background:url(/img/delete_icon2.png) no-repeat center right; 
    padding-right:25px; /*might need to adjust */
}

    <ul>
        <li>PMI</li>
        <li>Bla bla</li>
    </ul>

不需要过于复杂的事情.

如果您想要DIVS可点击,您可以这样做

<li><a href="delete.php">PMI</a></li>

和CSS:

li a { display:block; width:xxx; height:xxx; }

按要求.