Question

我遇到内联块父级内部元素的问题。一个人的孩子元素影响另一个。这很难解释，但在我的小提琴中很容易看出右边的div被推倒了。

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

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;
}

编辑小提琴

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

如何防止CSS块元素影响父内联块

1 个答案: