Icon placement relative to list items
When I show a hidden div that is stored inside an <li>
tag the icons are pushing down to the b开发者_如何学Goottom 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:
alt text http://www.redsandstech.com/css_layout_problem1.jpg
Here's the screen shot prior to expanding which shows where the icons are being pushed to:
alt text http://www.redsandstech.com/css_layout_problem2.jpg
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%".
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.
精彩评论