我的代码在这里(我是一个新手，只是在玩我学到的一些东西；我意识到这不是一件艺术品，我的链接都链接回 Codecademy，等等——它们只是占位符)这是CSS:
head {background-color:#eed393;}
#links {display:inline-block;
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {display: block;
height: 100%;
width: 100%
text-decoration: none;
}
这是 HTML:
<head>
<div id:"links">
<div id="locationhours";><a href="www.codecademy.com" class="fill_div">Location & Hours</a> </div>
<div id="menu";><a href="www.codecademy.com" class="fill_div">Menu</a></div>
<div id="catering";><a href="www.codecademy.com" class="fill_div">Catering</a> </div>
<div id="infocontact";><a href="www.codecademy.com" class="fill_div">Info & <br> Contact</a> </div>
</div>
我有一个名为#links 的 div id，我正尝试将其用于我想要通用的链接的各个方面。如您所见，虽然我使用了 inline-block，但我无法让链接处于水平线上；相反，它们聚集在一条垂直线上。如果我在我的 CSS 中放置“div”而不是“#links”，内联 block 可以工作，但我将有其他我想稍后使用的 div 元素，我不想应用链接的方面到。我做错了什么？
最佳答案
这是您现在内联代码的演示:http://jsfiddle.net/co738b5s/1/
我发现了很多问题。在“链接”div 中，您使用 : 而不是 = 来添加 id。此外，当您添加 ID 和类时，您不需要 ;你用过的。请参阅我的 html 进行更正。
<div id="links">
<div id="locationhours" class="inline">
<a href="www.codecademy.com" class="fill_div">Location & Hours</a> </div>
<div id="menu" class="inline">
<a href="www.codecademy.com" class="fill_div">Menu</a>
</div>
<div id="catering" class="inline">
<a href="www.codecademy.com" class="fill_div">Catering</a>
</div>
<div id="infocontact" class="inline">
<a href="www.codecademy.com" class="fill_div">Info & <br/> Contact</a>
</div>
</div>
//Had to make a new class for all the menu divs
head {background-color:#eed393;}
.inline {
float:left;
}
#links {
margin-left:35px;
margin-top:8px;
margin-bottom:40px;
vertical-align:top;
}
div:hover {opacity:0.8;
}
#locationhours {
border:none;
border-radius:50px;
width:200px;
height:70px;
text-align:center; font-family:Georgia;
font-size:30px;
background-color:#724d20}
#menu {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center; font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#catering {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
#infocontact {border:none;
border-radius:50px;
width:200px;
height:55px;
text-align:center;
font-family:Georgia;
padding-top:15px;
font-size:30px;
background-color:#724d20}
a:link {text-decoration:none;
color:#b0dddf;}
a.fill_div {;
height: 100%;
width: 100%
text-decoration: none;
}
关于html - 为什么 div id 弄乱了我的内联 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30745482/