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上，列表中的项目符号实际上位于项目符号的文本之下。

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

这是problem

的屏幕截图

提前感谢。

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; }

根据需要。

Answer 2

尝试使用list-style-position属性。选项为inside和outside。

Answer 3

我遇到了同样的问题，而且您似乎无法准确控制默认项目符号的位置。

对我而言，以下内容适用于Firefox和IE，但在Chrome中，它位于文本中：

<ul style="list-style-position: outside; margin:0; padding:0;">
   <li />
   <li />
</ul>

我需要为列表和列表项设置边距和填充以获取文本外的项目符号（磁盘）

<ul style="list-style-position: outside; margin:10px; padding:10px;">
   <li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
   <li style="padding: 10px 0 0 3px; margin-bottom: 8px;" />
</ul>

奇怪的是，如果我将这些底部边距设置为小于7像素的任何东西，子弹就会跳进去。 8px是最小的工作值，尽管元素周围和之间有很多空间（它们流畅地相互靠近，只有子弹点开始跳跃）。

<li>使用css（chrome问题）设计样式</li>

3 个答案: