<li> list-style-image +选择框,将选择框对齐到顶部</li>

时间:2012-05-22 14:12:13

标签: html css css3

当我尝试在list-style-image内执行select<li>框时,select框在底部垂直对齐,但list-style-image垂直对齐在顶部对齐。如何让select框也在顶部对齐?

看来select框中包含margin-top:5px,我试图摆脱它,但即使我将其设置为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>

1 个答案:

答案 0 :(得分:2)

永远不要使用list-style-image。相反,使用填充和CSS背景。这是您可以正确控制图像位置的唯一方法。

类似的东西:

li {
  background-image:url(BulletCheck.png); 
  background-repeat:no-repeat; 
  padding-left:30px; 
  margin-left:-30px;
}

请参阅我的教程:http://preview.moveable.com/JM/ilovelists/