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

问题描述

问 题

原来时候两个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: 
    
}

解决方案

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

这篇关于javascript - div中添加了一个form表单，突然这个div就变到下面了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！