Question

我搜索任何问题但没有结果。在添加css spearation :: after和:: before之后在中间图标和rwd中分隔内联块中的图标有很大问题。这是我的代码。

HTML：

<div class="icon-box">
            <div class="icon_1"></div>
            <div class="icon_2"></div>
            <div class="icon_3"></div>
 </div>

CSS：

.icon_1 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/timing_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}
.icon_2 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/presentation_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}
.icon_3 {
  float: left;
  display: inline-block;
  height: 66px;
  width: 66px;
  background-image: url("../img/accurate_icon.png");
  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
}

.icon_2::before,
.icon_2::after {
  display: inline-block;
  content: "";
  height: 10px;
  border-bottom: 1px solid #97735e;
  width: 100%;
}
.icon_2::before {
  right: 100%;
  margin-right: 10%;
}
.icon_2::after {
  left: 100%;
  margin-left: 200%;
}

我认为我的代码非常混乱，需要修复。

效果，我想要的是enter image description here

Answer 1

第一。除了.icon_1,.icon_2,.icon_3之外，所有background-image div都有共同的样式。所以，例如，为所有这些div提供一个共同的课程icon，或者，如果您无法更改HTML，请在下面的示例中使用.icon_1,.icon_2,.icon_3代替.icon。但不要写三次相同的风格。

秒。使用display:inline-block使用float:left。我选择使用float:left;因为inline-block在元素之间添加了额外的空格。（如果你想使用inline-block让我知道。有办法覆盖空格。）

第三。将margin:0 15px添加到.icon_2，其中添加了margin-left的{{1}}和margin-right

第四。将15px（我的示例中为pseudo-element）添加到包含三个图标的div :before。并根据需要设计风格。

我添加了.icon-box，以便该行（z-index:-1）位于图标下方。已添加:before，因此您可以看到它位于图标下方。

＆＃13;

background:red

＆＃13;

.icon {

  float:left;
  height: 66px;
  width: 66px;

  background-color: #97735e;
  background-position: center;
  background-repeat: no-repeat;
  position:relative;
}
.icon_1 { 
      background-image: url("../img/timing_icon.png");
 }
.icon_2 {
  background-image: url("../img/presentation_icon.png");
    margin:0 15px;
}

.icon_3 {
  background-image: url("../img/accurate_icon.png");
 }
.icon-box { position:relative;width:auto;float:left;}
.icon-box:before {
  content:"";
  position:absolute;
  height:1px;
  background:red;
  top:50%;
  width:100%;
  left:0;
  z-index:-1;
}

＆＃13;

图标分离和水平线背后

1 个答案: