html - 如何防止 CSS block 元素影响父行内 block

Question

我对内联 block 父级中的元素有疑问。一个的子元素正在影响另一个。很难解释，但在我的 fiddle 中很容易看出，右边的 div 被向下推了。

我尝试过各种方法，但我确信有一个简单的解决方案。任何建议表示赞赏。

http://jsfiddle.net/62asy/

HTML:

<div id="schedule"> 
            <div class="scheduleChoice">Leagues
                <select name="leagueList" id="leagueList" class="scheduleChoiceList">
                    <option value="0">Select a League</option>
                                    <option value="leagueId_246"> Aassss</option>

                                    <option value="leagueId_245"> aaa</option>
                                                    </select>
                <select name="teamList" id="teamList" class="scheduleChoiceList">
                </select>
                <div class="scheduleChoiceSubmit">Submit</div>
            </div>
            <div class="scheduleChoice">Arena
                <select name="arenaList" id="arenaList" class="scheduleChoiceList">
                    <option value="0">Select an Arena</option>
                                    <option value="arenaId_2"> ffffff</option>

                                    <option value="arenaId_1"> ffffff</option>
                                                    </select>
                <div class="scheduleChoiceSubmit">Submit</div>
            </div>                  
        </div>

CSS:

#schedule {
background-color: rgba(0, 0, 0, 0.44);
overflow: hidden;
text-align: center;
}
.scheduleChoice {
display: inline-block;
width: 25%;
background-color: rgba(190, 216, 255, 0.54);
height: 200px;
padding: 5px;
border-radius: 5px;
margin: 20px 25px;
}
.scheduleChoiceList {
width: 200px;
padding: 5px;
border-radius: 4px;
display: block;
margin: 10px auto;
}

Answer 1

添加垂直对齐

.scheduleChoice {
  vertical-align: top;
}

编辑 fiddle

http://jsfiddle.net/62asy/1/