html - Flex不必要地为链接创建行？

我有这个演示：https://jsfiddle.net/5dypyf0h/
我的问题是我想使链接标题为一行，并且verticaly与左侧的文本对齐。有什么建议吗？

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

最佳答案

只需移除浮动元素（无论如何在Flexbox中都无法使用）并移除宽度。

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>

关于html - Flex不必要地为链接创建行？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36551938/