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

Flexbox 可以在不使用 position:absolute 的情况下做到这一点。

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

span {
  margin-left:auto;
  color: red;
  padding: .25em;
}

<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">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  <span class="glyphicon glyphicon-plus"></span>
</div>

Answer 2

将此添加到您的 CSS

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

Answer 3

这个怎么样？相对定位框 class 并创建一个新的 div 来保存图标并定位该绝对位置，然后将顶部和右侧位置设置为 0px。

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


.box .ico-holder{
  position: absolute;
  padding: 2px;
  top: 0;
  right: 0;
}

span {
  color: red;
  display: inline-block;
}


https://jsfiddle.net/28n4kprv/10/

Answer 4

只需移动文本前的 <span> 图标，稍微重新排列您的 box 标记，即可获得您想要的效果。

.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;
}

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="box">
      <span class="glyphicon glyphicon-plus"></span>
      This is a sample text inside a sample box.
    </div>
    <div class="box">
      This is a sample text. 
      <span class="glyphicon glyphicon-plus"></span>
    </div>
  </body>
</html>

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

Icon positioning in div - ignore text whitespace

html

css

glyphicons