的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

你可能需要嵌套两个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; 
}