css - Css: 画像を整列させ、オーバーフローで選択する

Question

私は次のhtmlコードを持っています:

<div>
    <img src="..." />
    <select> ... </select>
<div>

および次の css :

div { 
    width: 100px;
    height: 32px;
    overflow: hidden;
}
img { width: 32px }
select { 
    width: 150px;
    display: inline-block;
}

画像と選択フィールドを垂直方向に揃える必要があります。選択フィールドがオーバーフローするのは正常です。目標は、私の画像の横にオーバーフローしていない選択フィールドの部分を表示することです。

現在、選択フィールドは画像の下にあります。

私の説明が明確かどうかわからないので、必要に応じて詳細を尋ねてください。

Answer 1

おそらく、2 つの div をネストする必要があります: 「overflow:hidden;」を含む外側の div と、2 つの要素を含むのに十分な幅の内側の div:

HTML:

<div class="wrap">
    <div class="inner">
        <img />
        <select></select>
    </div>
</div>

CSS:

div.wrap {
    width:100px;
    height:32px;
    overflow:hidden;
}
div.inner {
   width:200px;
}
img {width: 32px;}
select {width: 150px;}

Answer 2

div { 
    width: 100px;
    height: 32px;
    overflow: hidden;


}
img { width: 32px 
float:left;}
select { 
    width: 150px;
    display: inline-block;
    float:left;
}