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这一事实有关。

Answer 2

.float-left {
float:left;
}

Fiddle example

解决方案可能是在select元素上添加float。

<select>元素抛弃对齐</select>

2 个答案: