html - div 中的图标定位 - 忽略文本空格

Question

我试图在带有文本的 div 中放置一个图标。

无论里面有多少行文本，图标都应该固定在右上角。我怎样才能做到这一点？

.box {
  padding: 5px;
  width: 160px;
  height: 50px;
  margin-bottom: 30px;
  background-color: blue;
  line-height: 20px;
  color: white;
}

span {
  color: red;
  display: inline;
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="box">
  This is a sample text inside a sample box. 
  <span class="glyphicon glyphicon-plus"></span>
</div>
<div class="box">
  This is a sample text. 
  <span class="glyphicon glyphicon-plus"></span>
</div>

Fiddle

Answer 1

将此添加到您的 CSS

.box{
    display: flex;
}
span{
    margin-left: auto
}