html - <select> 元素脱离 <div> 对齐

Question

我正在尝试了解应用于我正在使用的测试站点的 css 基础知识。

将问题简化为最简单的情况我有三个相等的，其中两个应该包含列表，第三个不包含列表。

html如下:

<div id="Div1" class="Results">
   <select id="FirmList" size=10></select>   
</div>
<div id="Div2" class="Results">
</div>    
<div id="Div3" class="Results">
   <select id="PersonList" size =10></select> 
</div>  

CSS 如下:

div {
  border: 1px dashed black;  
  border-radius: 5px;
  padding: 10px;
  margin: 8px;
}

select {
  width: 290px;
}

.Results {
  border: 2px solid black;  
  width: 300px;
  height: 500px;
  display: inline-block;
}

如果我注释掉这三个元素正确对齐。

引入其中任何一个都会导致其父级向下移动页面。页面上的其他元素(表格、标题和其他 div)似乎都不会以同样的方式影响对齐方式。

有什么建议吗？

Answer 1

将vertical-align:top 添加到.Results 规则

.Results {
  border: 2px solid black;  
  width: 300px;
  height: 500px;
  display: inline-block;
  vertical-align:top;
}

演示在 http://jsfiddle.net/QBVz9/1/embedded/result/

---

它与select 元素无关。即使您在 .Results 元素中放入一个字母，它也会导致问题。

这与您已将 div 元素转换为 display:inline-block 这一事实有关。