右、左flaot,それぞれwidth 45%にしてiphoneで見ると余白がでてしまう。

Question

.l{
	width:45%;
	float:left;
}

.r{
	width:45%;
	float:right;
}

<div class="clearfix">
 <div class="l">
       <select>
         <option>hogehoge</option>
        </select>
 </div>
 <div class="r">
       <select>
         <option>hogehoge</option>
        </select>
 </div>
</div>

iphoneで見ると画面いっぱいにならず
右側に40%くらいの余白ができてしまいます。
解決方法を教えてください。

Answer 1

iphone 実機ではなくchromeのデベロッパーツールのiphone設定での確認ですが、セレクトボックスが右寄せになっていないという事でしょうか？クラス指定されているdiv自体は４５％ずつ左右になっているように見受けられますが

.l{
    width:45%;
    float:left;
    background-color: red;
}

.r{
    width:45%;
    float:right;
    background-color: blue;
}

DIVのボックス要素自体は45%幅、左右寄せになってないですか？

Comments

[hiim]

select {
width:100%;
}

を追加するとか。。。