Размещение значков относительно элементов списка

Question

Когда я показываю скрытый div, который хранится внутри тега <li>, значки нажимают вниз на нижнюю часть <li>. Как я могу это предотвратить?

Вот HTML:

<ul> 
<li>Utah 
    <ul> 
     <li>Park City 
     <ul> 
      <li>Park Cat 1 
        <div><img class="portf_edit" /></div> 
        <div><img class="portf_archive" /></div> 
        <div><img class="portf_delete" /></div> 
      </li> 
      <li>Skiing 
        <div><img class="portf_edit" /></div> 
        <div><img class="portf_archive" /></div> 
        <div><img class="portf_delete" /></div> 
      </li> 
     </ul> 
     </li> 
    </ul> 
</li> 
</ul> 

Вот литий CSS:

li { 
list-style-type:none; 
vertical-align: top; 
list-style-image: none; 
left:0px; 
text-align:left; 
clear: both; 
} 
.portf_edit{ 
float:right; 
position: relative; 
right:50px; 
display:block; 
} 
.portf_archive{ 
float:right; 
position: relative; 
right:-5px; 
display:block; 
} 
.portf_delete{ 
float:right; 
position: relative; 
right: -60px; 
display:block; 
} 

Вот снимок экрана до расширения, который показывает иконки, как я хочу, чтобы они выстраиваются в очередь:

alt text http://www.redsandstech.com/css_layout_problem1.jpg

Вот скриншот перед расширением, который показывает где значки подталкивают к:

alt text http://www.redsandstech.com/css_layout_problem2.jpg

Answer 1

Если вы правильно плаваете кнопки EDIT/ARCHIVE/DELETE, укажите их перед текстом. Пример:

<li> 
    <div><img class="edit" /></div> 
    <div><img class="archive" /></div> 
    <div><img class="delete" /></div> 
    Park Cat 1 
</li> 

Также вам может потребоваться указать ширину на LI; что-то вроде «100%».

Answer 2

Вы должны сделать <li> высокими, как ваши изображения.

<li class="with-icons">Skiing 
    <div><img class="portf_edit" /></div> 
    <div><img class="portf_archive" /></div> 
    <div><img class="portf_delete" /></div> 
</li> 

и

li .with-icons { 
    height: 32px; // adjust according to your image size 
} 

Вы можете быть в состоянии опустить div вокруг каждого изображения тоже. Не уверен, что они необходимы.