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

Question

我有这个演示:https://jsfiddle.net/5dypyf0h/ 我的问题是我想将链接标题排成一行，并在垂直方向上与左侧的文本对齐。有什么建议吗？

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

Answer 1

只需删除 float (无论如何在 flexboxes 中不起作用)并删除宽度。

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>