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：一个带有“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;
}

Css：对齐图像并选择溢出

2 个答案: