我的第一个方块是用div标签制作的，第二个是用我命名为 #blacksquare2 的ID。#blacksquare2 的第二个方块似乎总是在底部与我的第一个方块对齐，无法将其带到页面上。此外，"我爱它"这几个字似乎彼此分开。如果有帮助，我正在尝试实现像麦当劳网站这样的东西，只是为了练习。
CSS:
div{
height:90px;
width:96px;
background-color:#CC0000;
border-radius:4px;
text-align:center;
margin-left:132px;
}
#blacksquare2{
height:25px;
width:200px;
background-color:#000000;
text-align:left;
margin:1px 10px 10px 10px
}
#blacksquare2 a{
color:#E6E600;
font-size:11px;
font-family:Arial;
margin:25px
}
span{
font-size:50px;
text-decoration:none;
font-family:Arial;
color:#E6E600;
font-weight:Arial;
margin-left:10px;
}
a{
text-decoration:none;
font-size:13px;
margin-right:10px;
color:white;
font-family:Arial bold;
}
l{
font-size:8px
}
body{
margin-top:0px
}
HTML:
<!DOCTYPE html>
<head>
<title>Home :: McDonalds.com</title>
<link rel="stylesheet"; type="text/css"; href="McDonald'sPrac.css">
</head>
<body>
<div>
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a>
</div>
<div id="blacksquare2">
<a href="http://www.mcdonalds.com/us/en/home.html#">Home<a>
</div>
</body>
</html>
元素
div默认占用所有可用的水平空间。您可以使用span而不是div作为第一个div。另外，设置
display: inline;
在 CSS 中将具有相同的效果。
为了使文本"我喜欢它"正确对齐，您不应该为div 提供任何宽度。
div 是一个块元素，因此将具有获取整个块的属性。
尝试在你的 css 中给出div{display:inline;}。