<li> стиль с CSS (проблемы с хромом)

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

может достичь желаемого эффекта.

edit

попробуйте добавить 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 - это наименьшее рабочее значение, хотя вокруг элементов и между ними достаточно места (они бегло приближаются друг к другу, только точки пули начинают прыгать)