Icon placement relative to list items

Question

When I show a hidden div that is stored inside an <li> tag the icons are pushing down to the bottom of the <li>. How can I prevent this?

Here's the 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>

Here's the li 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;
}

Here's a screen shot prior to expanding which shows the icons how I want them to line up:

Here's the screen shot prior to expanding which shows where the icons are being pushed to:

Answer 1

You need to make the <li> as tall as your images.

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

and

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

You may be able to omit the div around each image, too. Not sure they're necessary.

Answer 2

If you're right-floating the EDIT/ARCHIVE/DELETE buttons, specify them BEFORE the text. Like this:

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

Also, you may need to specify a width on the LI; something like "100%".