アイコンの分離と水平線の後ろ

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

を取得したいもの

効果、。 background-image以外のすべての.icon_1,.icon_2,.icon_3個のdivに共通のスタイルがあります。たとえば、共通のクラスiconをすべてのdivに付けてください.HTMLを変更できない場合は、下の例で.iconの代わりに.icon_1,.icon_2,.icon_3を使用してください。同じスタイルを3回書いてはいけません。

秒。 display:inline-blockを使用するか、float:leftを使用してください。 inline-blockは要素間に空白を追加するので、float:left;を使用することにしました。 （inline-blockを使用したい場合は、空白を上書きする方法があります）

third。 margin-left第四15px

のmargin-rightを追加.icon_2にmargin:0 15pxを追加します。 div38にpseudo-element（私の例では:before）を追加し、3つのアイコンをそれぞれ.icon-boxにラップします。あなたが望むようにそれをスタイルします。

私はz-index:-1を追加して、アイコン（:before）がアイコンの下に表示されるようにしました。 にはbackground:redが追加されているので、アイコンの下に表示されます。あなたはより良いだけafters、無beforesを使用することができ

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

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