这是我的标记:
#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;
}

<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 & Directions</a>
<a class="sectionElem">Contact Us</a>
</div>
</div>
&#13;
第三个内联块元素被推下约20px,如下所示:
POWER ON SERVICES
SUPPORT
导致最后一个内联块元素以这种方式显示的原因是什么?
答案 0 :(得分:4)
因为垂直对齐的初始值是基线。
试试vertical-algin:top
.mapSection
#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 & Directions</a>
<a class="sectionElem">Contact Us</a>
</div>
</div>
&#13;
答案 1 :(得分:-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 & Directions</a>
<a class="sectionElem">Contact Us</a>
</div>
</div>