div中添加了一个form表单，突然这个div就变到下面了？

Question

原来时候两个div在同一行，然后再第一个div添加了一个form表单之后，为什么第一个div就不与第二个div水平对齐了？

<div class="row">
         <form action="">
             区域
               <select class="formselect">
                   <option>朝阳区</option>
                   <option>海淀区</option>
               </select>
             <select class="formselect">
                   <option>朝阳区</option>
                   <option>海淀区</option>
               </select>
         </form>
     
     </div>
     <div class="row">
     
     
     
     </div>
这是css
.row{
    display: inline-block;
    border:1px solid #F00; 
    width:450px;
    height:400px;
    margin:0 auto;
}

.formselect{
            border: 1px solid #ccc;
            color: #000;
            font-family: 'Open Sans', sans-serif;
            font-size: 1em;
            height: 30px;
            transition: background 0.3s ease-in-out;
            width: 150px;
            margin: 
    
}

Answer 1

display：inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。比如设置vertical-align:middle 或者直接.row上加上overflow:hidden也能解决问题

Answer 2

最好不要在块元素上设置display: inline-block;，低版本浏览器会有兼容性问题。你把它改成浮动就好了。

但是不要忘了清除浮动

Answer 3

关于这个问题有两个css属性可以做调整。
第一：float 属性。
第二：width属性。

这个问题可能是因为 div 这个标签佔了整个水平区域，因此第二div到下面去了。
你必须在css中宣告float属性。
范例：

.row {
    float: left;
    border: 1px solid #F00;
    width: 450px;
    height: 400px;
    margin: 0 auto;
}

.formselect {
    border: 1px solid #ccc;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    height: 30px;
    transition: background 0.3s ease-in-out;
    width: 150px;
    margin:
}

结果如下：

使用float 的另外一个问题是，你必须去设置width 大小，如果是一行要显示三格，则width:33%要设置。

.row {
    float: left;
    border: 1px solid #F00;
    width: 33%;
    height: 400px;
    margin: 0 auto;
}

.formselect {
    border: 1px solid #ccc;
    color: #000;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    height: 30px;
    transition: background 0.3s ease-in-out;
    width: 150px;
    margin:
}

设置三个div的结果图：

最後，我个人比较偏好使用bootstrap的grid system 来整理自己的版面配置，因為要做到responsive 的grid 真的非常方便。
Bootrap grid system

Answer 4

vetical-align默认值是baseline，调整值就好啦。参考CSS深入理解vertical-align和line-height的基友关系

另外两个div中间的间隙是因为标签之间的空格造成的，可在父层加font-size：0来消除。具体参见去除inline-block元素间间距的N种方法