Question

我的第一个方块是用div标签制作的，第二个是用ID命名的#blacksquare2。＃blacksquare2的第二个方块似乎始终与我的第一个方块保持对齐，并且无法将其显示在页面上。而且“我喜欢”这个词是“喜欢”。它＆＃39;似乎是彼此分开的。如果它有所帮助，我会尝试实现类似麦当劳网站的东西，只是为了练习。

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>

Answer 1

默认情况下，元素div会占用所有可用的水平空间。您可以使用span代替div作为第一个div。另外，设置

display: inline;

css中的

会产生同样的效果。

Answer 2

对于文本'我喜欢它'要正确对齐你不应该为div提供任何宽度。

div是一个块元素，因此将具有占据整个块的属性。

尝试在你的CSS中提供div{display:inline;}。

如何制作页面顶部没有空格的第二个方块？

2 个答案: