选择菜单超出其物理形状

Question

我是HTML和CSS的初学者。我正在使用jquery mobile和jquery ui来构建页面。我添加了一个选择菜单和两个图像作为旁边的按钮。我设置了1px的边框宽度来查看布局。如下图所示，选择菜单边框已扩展并覆盖图像，因此我无法单击它们。

select menu border covers image

这是html

<div id="container" >
  <img src="styles/add_button.png" id="addButton" class="imgButton"> 
  <img src="styles/remove_button.png" id="removeButton" class="imgButton">
  <form>          
    <select name="select-native-1" id="selectMenu">
  </select>                 
  </form>
</div>

这是CSS

.imgButton{
    float : right;
    margin: 0em .2em;
}

#container{
    vertical-align: middle;
    margin:0em 1em 1em 1em;
}

#selectMenu{
    float: right;
}

这里有什么问题？

Answer 1

我发现表格是正确对齐事物的最简单方法。试试这个......

<table><tr> 
<td><select name="select-native-1" id="selectMenu">    </select></td> 
<td><img src="styles/add_button.png" id="addButton"    class="imgButton"> </td> 
<td><img src="styles/remove_button.png"    id="removeButton" class="imgButton"></td> 
</tr> </table>

然后为td元素添加宽度以使其具有您想要的外观。