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
}

Answer 2

Flexbox可以在不使用position:absolute的情况下实现这一目标。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

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

.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中的图标定位 - 忽略文本空格

4 个答案: