使用內聯塊重疊按鈕

Question

可能是一個明顯的解決方案，但我似乎無法弄清楚爲什麼我的兩個按鈕被定位在另一個上面（＃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>

Answer 1

你的錨元素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 */ 
 
}

<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>