可能是一个明显的解决方案,但我似乎无法弄清楚为什么我的两个按钮位于另一个顶部(#btn-color直接位于#btn-icon之上)当我希望它们对齐时侧。
#btn-color,
#btn-icon {
display: inline-block;
}
#btn-icon a {
font-weight: 600;
font-size: 1.15em;
padding: 15px 20px 15px 43px;
}
#btn-color a {
font-weight: 600;
padding: 20px 35px;
border-radius: 5px;
border: 2px solid transparent;
color: #fff;
background-color: #d11e5d;
}
<div id="ftr-icn-wrap" class="flex">
<div id="btn-icon"><a href="#">professional</a></div>
<div id="btn-color"><a href="#">Contact me</a></div>
</div>
答案 0 :(得分:0)
默认情况下,您的锚元素为display: inline
。因此,不尊重顶部和底部填充。将它们更改为display: inline-block
。
#btn-color, #btn-icon {
display: inline-block;
}
#btn-icon a {
font-weight: 600;
font-size: 1.15em;
padding: 15px 20px 15px 43px;
display: inline-block; /* new */
}
#btn-color a {
font-weight: 600;
padding: 20px 35px;
border-radius: 5px;
border: 2px solid transparent;
color: #fff;
background-color: #d11e5d;
display: inline-block; /* new */
}
&#13;
<div id="ftr-icn-wrap" class="flex">
<div id="btn-icon"><a href="#">professional</a></div>
<div id="btn-color"><a href="#">Contact me</a></div>
</div>
&#13;