<分区>
html - 为什么我的 HTML div 显示不正确？
我正在为旧的网络浏览器编写一个小网站，所以我必须使用老式标签。
body {
background-color: black;
}
#left-pane,
#right-pane {
border: 1px solid white;
display: inline-block;
width: 20em;
height: 40em;
}<div id="left-pane">
<div class="conf">
<p>First select</p>
<select class="value">
<option id="fr">France</option>
<option id="ch">Suisse</option>
</select>
</div>
<div class="conf">
<p>Second select</p>
<div class="value">
<input type="radio" name="known" Value="Oui" />Oui
<input type="radio" name="known" Value="Non" />Non
</div>
</div>
</div>
<div id="right-pane">
<p>Third</p>
<div id="goods">
<input type="checkbox" name="AccessoiresAnimalerie" Value="Accessoires Animalerie" />
<input type="checkbox" name="AccessoiresChaussures" Value="Accessoires Chaussures" />
</div>
</div>问题是我遇到了一个简单的问题，但我不知道哪里出了问题；我错过了一些东西......
我不明白为什么我的右 Pane 向下移动。 我制作了两个 Pane 内联 block ，因此它们应该并排在同一行上。 但是相反，我看到了这个:
它在 Chrome 和 Firefox(最新版本)中呈现相同。
我知道我可以用 float 以其他方式做到这一点，但我想知道我的实现有什么问题。
最佳答案
你必须设置 vertical-align属性为top，表示元素排在父元素的顶部，有一篇很好的文章here解释了 vertical-align 属性的工作原理。
工作演示:
body {
background-color: black;
}
#left-pane, #right-pane {
border: 1px solid white;
display: inline-block;
vertical-align: top;
width: 10em;
height: 40em;
}<div id="left-pane">
<div class="conf">
<p>First select</p>
<select class="value">
<option id="fr">France</option>
<option id="ch">Suisse</option>
</select>
</div>
<div class="conf">
<p>Second select</p>
<div class="value">
<input type="radio" name="known" Value="Oui" />Oui
<input type="radio" name="known" Value="Non" />Non
</div>
</div>
</div>
<div id="right-pane">
<p>Third</p>
<div id="goods">
<input type="checkbox" name="AccessoiresAnimalerie" Value="Accessoires Animalerie" />
<input type="checkbox" name="AccessoiresChaussures" Value="Accessoires Chaussures" />
</div>
</div>关于html - 为什么我的 HTML div 显示不正确？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48245590/