Question

我需要在实线边框的末尾添加一个图标，并使该图标具有响应性（即，当边框变大或变小时，该图标将保留在该行的末尾）。

这是我现在拥有的第一张图片。

这是我的代码：

<h3>Open Enrollment</h3><img src="../img/icons/icon_OpenEnrollment.png" class="header-icon">


h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}

.header-icon {
    float: right;
}

这是我需要创建的。

Answer 1

position:relative到.header-icon类，并且top:-40px and left:-10px有效

h3:after {
  content: ' ';
  display: block;
  border: 1.5px solid #f1a327;
  position: relative;

}

.header-icon {
  position:relative;
  float: right;
  top:-40px;
  left:-10px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<h3>Open Enrollment</h3><img style="width:40px"src="https://cdn0.iconfinder.com/data/icons/tutor-icon-set/512/set_of_three_books-512.png" class="header-icon">

</body>
</html>

Answer 2

尝试一下：

.header {
  width: 100%;
  position: relative;
 }
 
 .header h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}
 
 .header .header-icon {
   position: absolute;
   top: 0;
   right: 0;
   background: #fff;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="header">
  <h3>Open Enrollment</h3>
  <i class="fab fa-adn fa-3x header-icon"></i>
</div>

Answer 3

通过从图标中减去margin-top（添加了我自己的），我相信我达到了您想要的效果。

我没有在常规边框中将span类和img类包装在div中。在span类中，我给了它width和background color，以模拟边框。

如果要使边框显示得比img更近或更远，则可以编辑img的边距。通过使用图像float: right，边框似乎不会穿过图像。

div{
  display:inline-flex;
  flex-direction:row;
}
#border {
  
    width:400px;
    height:0;
    justify-content:center;
    border: 1.5px solid #f1a327;
   
    
}
img{
  height:40px;
  width:45px;
  float:right;
  margin-top:-20px;
  margin-left:1em;
}

  <h3>
  Open Enrollment
  </h3>
<div>

  <span id = "border"></span>
  <img src="http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png" class="header-icon">
</div>

Answer 4

将img作为background-img添加为h3（:: after）:)的伪元素

h3 {border-bottom: 1.5px solid #f1a327; position: relative;}
h3:after {
     content: '';
    position: absolute;
    background-image: url(https://image.ibb.co/ibDnXK/circ.png);
    display: block;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    right: 0;
    top: calc(50% - 10px);
}

<h3>Open Enrollment</h3>

Answer 5

h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
    z-index: -1;
}

.header-icon {
    float: right;
}

    <!DOCTYPE html>
<html>
<head>
</head>
<body>

<h3>Open Enrollment<span><img style="height:40px;" src="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Online-Shopping-512.png" class="header-icon"></span></h3>


</body>
</html>

Answer 6

您可以尝试类似的方法。有一些选择。使用ems会导致跨设备使用不同的字体大小。

h3 {
  width:90%;
  display:inline-block;
  line-height:1em;
}
h3:after {
    content: ' ';
    display: block;
    border: 1.5px solid #f1a327;
    position: relative;
}

.header-icon {
    float: right;
    width:10%;
    position:absolute;
    right:0;
    top:2em;
}

将图标添加到CSS边框的末尾

6 个答案: