我在 Code Academy 的类(class)上遇到了问题。我正在尝试创建一排代表 friend 、家人和敌人的方框。
我用 6 个类创建了 6 个 div。第一个和最后一个 div 具有“best_friend”和“archnemesis”的 ID 出于某种原因，一旦我将文本添加到其中一个 div，它就会垂直向下下降几个像素，我不确定为什么。
代码如下:
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>My Social Network</title>
</head>
<body>
<!--Add your HTML below!-->
<div class="friend" id="best_friend"></div>
<div class="friend"></div>
<div class="family"></div>
<div class="family"></div>
<div class="enemy"></div>
<div class="enemy" id="archnemesis"></div>
</body>
</html>
CSS:
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border: 2px solid black;
}
.friend{
border: 2px solid #008000;
}
.family{
border: 2px solid #0000FF;
}
.enemy{
border: 2px solid #FF0000;
}
#best_friend{
border: 4px solid #00C957;
}
#archnemesis{
border: 4px solid #CC0000;
}
这是代码学院的代码示例，我正在尝试模仿它:
最佳答案
您错过了 vertical-align 属性:
div {
display: inline-block;
/* change to middle, bottom or baseline to get different alignments */
vertical-align: top;
/*vertical-align: middle;
vertical-align: bottom;
vertical-align: baseline;*/
}
关于html - 6 个框的简单内联 block ，我将文本添加到一个框，它垂直向下移动，为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38696196/