我正在构建一个非常简单的网页，该网页将被分成 4 个均匀的四分之一页面，每个 Angular 都有一个 div。不过，我遇到了这个奇怪的问题——其中一个 div 一直表现得好像上面有东西，但当我检查该元素时，我看不到那里的任何东西。这是一张图片:
这是完整的HTML和CSS(不是很长):
<html>
<head>
<style type="text/css">
*{
margin: 0;
font-family: "Helvetica", helvetica, arial, sans-serif;
}
html, body{
height: 100%;
}
h2{
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5%;
}
.qrtr{
width: 50%;
display: inline-block;
height: 50%;
background: darkgrey;
}
#cat{
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
font-size: 16px;
}
#viewer{
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
background: white;
}
</style>
</head>
<body>
<div class="qrtr">
<h2>Catalog</h2>
<select id="cat" name="cat" size="50">
<option>Hello</option>
<option>Palm Trees</option>
<option>Chocolate Milk</option>
<option>Code</option>
</select>
</div><div class="qrtr"><h2>View</h2><div id="viewer">
</div>
</div>
</body>
</html>
当我检查这些元素时，我看不出有什么理由存在这个差距。我试过弄乱一些 CSS 来让它就位，但我想不出正确的方法。除了我想找到解决方案之外，我真的很想了解为什么当我显然没有编写任何 CSS 来让它有意这样做时它会以这种方式运行。任何人都知道是什么原因造成的？它甚至在 JSFiddle 中做到了.
最佳答案
在http://www.w3.org/TR/CSS21/visudet.html的最后一句给出了解释:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
第一个 div 中的 select 元素定义了它的最后一个行框。第二个 div 中的 h2 元素定义了它的最后一个行框。 (查看器 没有行框，因为它没有内容。)
因此，div 对齐，以便 select 和 h2“坐在”同一行上。
知道这一点，有几个解决问题的办法:
- 将
vertical-align: top;添加到.qrtr的样式中:
* {
margin: 0;
font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
height: 100%;
}
h2 {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5%;
}
.qrtr {
width: 50%;
display: inline-block;
height: 50%;
background: darkgrey;
vertical-align: top;
}
#cat {
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
font-size: 16px;
}
#viewer {
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
background: white;
}<div class="qrtr">
<h2>Catalog</h2>
<select id="cat" name="cat" size="50">
<option>Hello</option>
<option>Palm Trees</option>
<option>Chocolate Milk</option>
<option>Code</option>
</select>
</div><div class="qrtr">
<h2>View</h2>
<div id="viewer">
</div>
</div>- 添加
overflow: hidden;(或overflow: auto;)做.qrtr的样式:
* {
margin: 0;
font-family: "Helvetica", helvetica, arial, sans-serif;
}
html,
body {
height: 100%;
}
h2 {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5%;
}
.qrtr {
width: 50%;
display: inline-block;
height: 50%;
background: darkgrey;
overflow: hidden;
}
#cat {
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
font-size: 16px;
}
#viewer {
width: 90%;
height: 80%;
border: 1px solid black;
margin-left: 5%;
background: white;
}<div class="qrtr">
<h2>Catalog</h2>
<select id="cat" name="cat" size="50">
<option>Hello</option>
<option>Palm Trees</option>
<option>Chocolate Milk</option>
<option>Code</option>
</select>
</div><div class="qrtr">
<h2>View</h2>
<div id="viewer">
</div>
</div>关于html - 简单的 HTML + CSS 页面中出现奇怪的差距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33157754/