Question

我的代码就在这里（我新手只是玩了一些我已经学过的东西;我意识到这不是艺术品，我的链接都链接回Codecademy等等 - 他们＆＃39;只是占位符）这是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，我试图将其用于我想要通用的链接的各个方面。正如您所看到的，虽然我使用内联块，但我无法将链接放在水平线上;相反，它们在一条垂直线上聚集起来。如果我把＆＃34; div＆＃34;而不是＆＃34; #link＆＃34;在我的CSS中，内联块工作，但是我将要在以后使用其他div元素，我不想将链接的方面应用到。我做错了什么？

Answer 1

以下是您的代码内联演示：http://jsfiddle.net/co738b5s/1/

我发现了很多问题。在＆＃34;链接＆＃34; 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;
}

Answer 2

必须将CSS display: inline应用于要内联的列表中的每个成员。 display属性最好描述为父节点中的节点关系，不所有子节点的关系。此外，display是一个不可继承的属性（请参阅W3Schools），因此将其应用于父节点#links不会影响其子节点#locationhours，{ {1}}等等。

当你改变它以影响#menu时，你在不知不觉中影响了所有的孩子，因为他们也是div。要在没有任何内联CSS的情况下快速解决此问题，请将每个列表成员的div设置为类div，如下所示...

.listmem

...所以将此添加到您的CSS应该可以快速解决问题：

<div id="locationhours" class="listmem">

为什么一个div id搞乱了我的内联块？

2 个答案: