Reputation: 13243
When I try to do list-style-image
and a select
box inside the <li>
, the select
box aligns vertically at the bottom, but the list-style-image
vertically aligns at the top. How do I make the select
box also align at the top?
It appears the select
box holds a margin-top:5px
that i'm trying to get rid of, but its still there even when i set it to 0.
CSS:
li {
list-style-image:url(image1.jpg);
vertical-align:text-top;
}
select { margin-top:0; }
HTML:
<li>
<select>
<option>1</option>
</select>
</li>
Upvotes: 0
Views: 806
Reputation: 114447
Never use list-style-image
. Instead, use padding an a CSS background. This is the only way you can control the image position properly.
Something like:
li {
background-image:url(BulletCheck.png);
background-repeat:no-repeat;
padding-left:30px;
margin-left:-30px;
}
See my tutorial: http://preview.moveable.com/JM/ilovelists/
Upvotes: 2