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

【问题标题】：Icon positioning in div - ignore text whitespacediv 中的图标定位 - 忽略文本空格
【发布时间】：2018-01-12 21:37:13
【问题描述】：

我正在尝试在带有文本的 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

【问题讨论】：

@Paulie_D 感谢您提供帮助的方式，这将使 OP 在此处提问之前思考并进行研发

标签： html css glyphicons

【解决方案1】：

将此添加到您的 CSS 中

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

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

这是怎么回事？定位 box 类的相对位置并创建一个新的 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/

【讨论】：

【解决方案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>

【讨论】：