選択メニューは物理的形状を超えています

Question

私はHTMLとCSSの初心者です。私はjquery mobileとjquery UIを使ってページを構築しています。私はそれの隣にボタンとして選択メニューと2つの画像を追加しました。私はレイアウトを見るために1pxの境界幅を設定しました。下の図のように、選択メニューの枠線は拡大され、画像をカバーしているので、クリックすることはできません。

select menu border covers image

これは、これはCSS

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

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

#selectMenu{ 
    float: right; 
} 

ここでの問題は何ですか？ある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> 

ですか

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要素に幅を加えて、望みの外観にします。