Question

这是我的标记：

＆＃13;

#siteMap {
  text-align: center;
  background-color: #26AAE1;
  color: white;
}

.mapSection {
  text-align: center;
  width: 32%;
  display: inline-block;
  padding: 0px !important;
  margin: 0 !important;
}

.sectionElem {
  display: block;
  color: white;
}

＆＃13;

<div id="siteMap">
  <div class="mapSection">
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">POWER ON</span>
    <a class="sectionElem">Join Now</a>
    <a class="sectionElem">Free Trial</a>
    <a class="sectionElem">Membership</a>
  </div>
  <div class="mapSection">
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SERVICES</span>
    <a class="sectionElem">Download Our App</a>
    <a class="sectionElem">Refer a Friend</a>
    <a class="sectionElem">Member Login</a>
  </div>
  <div class="mapSection" style="top:0">
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SUPPORT</span>
    <a class="sectionElem">Map &amp; Directions</a>
    <a class="sectionElem">Contact Us</a>
  </div>
</div>

＆＃13;

第三个内联块元素被推下约20px，如下所示：

           POWER ON       SERVICES
                                         SUPPORT

导致最后一个内联块元素以这种方式显示的原因是什么？

Answer 1

因为垂直对齐的初始值是基线。试试vertical-algin:top

.mapSection

＆＃13;

#siteMap{
text-align: center;
background-color:#26AAE1;
color:white;
}
.mapSection{
    text-align:center;
    width:32%;
    display:inline-block;
    padding:0px !important;
    margin:0 !important;
        VERTICAL-ALIGN: top;
}
.sectionElem{
    display:block;
    color:white;
}

＆＃13;

<div id="siteMap">
     <div class="mapSection">
         <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">POWER ON</span>
         <a class="sectionElem">Join Now</a>
         <a class="sectionElem">Free Trial</a>
         <a class="sectionElem">Membership</a>
     </div>
      <div class="mapSection">
         <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SERVICES</span>
         <a class="sectionElem">Download Our App</a>
          <a class="sectionElem">Refer a Friend</a>
          <a class="sectionElem">Member Login</a>
     </div>
     <div class="mapSection" style="top:0">
         <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SUPPORT</span>
         <a class="sectionElem">Map &amp; Directions</a>
         <a class="sectionElem">Contact Us</a>
     </div>
  </div>

＆＃13;

Answer 2

使用flexbox简化您的代码。

#siteMap {
  text-align: center;
  background-color: #26AAE1;
  color: white;
  display: flex;
  justify-content: space-around;
}

.sectionElem {
  display: block;
}

span {
  font-size: 20px;
  font-weight: bold;
  color: #F15A2A;
}

<div id="siteMap">
  <div>
    <span>POWER ON</span>
    <a class="sectionElem">Join Now</a>
    <a class="sectionElem">Free Trial</a>
    <a class="sectionElem">Membership</a>
  </div>
  <div>
    <span>SERVICES</span>
    <a class="sectionElem">Download Our App</a>
    <a class="sectionElem">Refer a Friend</a>
    <a class="sectionElem">Member Login</a>
  </div>
  <div>
    <span>SUPPORT</span>
    <a class="sectionElem">Map &amp; Directions</a>
    <a class="sectionElem">Contact Us</a>
  </div>
</div>

为什么我的最后一个内联块元素被推下来了？

2 个答案: