css - Css: align image and select with overflow

Question

I have the following html code :

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

and the following css :

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

I need to vertical align the image and the select field. The fact that the select field will be in overflow is normal. The goal is to show the part of the select field that is not in overflow next to my image.

Currently, the select field is below the image.

I'm no sure if my explanation is clear, so ask more details if you need.

Answer 1

您可能需要嵌套两个 div：一个带有“overflow:hidden;”的外部 div，以及一个足够宽以包含两个元素的内部 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;
}