Flex爲鏈接創建不必要的行？

我有這個演示：https://jsfiddle.net/5dypyf0h/ 我的問題是，我想要在一行中的鏈接標題和verticaly與左側的文本對齊。任何建議？Flex爲鏈接創建不必要的行？

<div class="explanation"> 
    <span>Ukoliko je adresa dostave drugacija od navedene adrese za naplatu, molimo unesite je</span> 
    <a href="#" class="pull-right">UKLONI ADRESU</a> 
</div>

來源

2016-04-11 None

我想要的「UKLONI ADRESU」在一排與使用Flex，因爲我需要verticaly在左側中心文字與右側HREF鏈接 – None

只需刪除浮動（無論如何都不能在柔性盒中工作）並刪除寬度。

JSFiddle Demo

.explanation { 
 
    margin-top: 10px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.explanation span { 
 
    font-family: 'OpenSans-Regular'; 
 
    font-size: 12px; 
 
    color: black; 
 
    margin-top: 5px; 
 
} 
 
.explanation a { 
 
    padding: 10px; 
 
    background-color: #24282f; 
 
    color: white; 
 
    font-family: 'OpenSans-Bold'; 
 
    font-size: 14px; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    white-space: nowrap; 
 
    /* link text will not break */ 
 
}

<div class="explanation"> 
 
    <span>Ukoliko je adresa dostave drugacija od navedene adrese za naplatu, molimo unesite je</span> 
 
    <a href="#" class="pull-right">UKLONI ADRESU</a> 
 
</div>

來源

2016-04-11 14:49:48

Flex爲鏈接創建不必要的行？

回答

相關問題