span i類字體真棒之前後寬100px

Question

我想設置在我的代碼之前或之後相應的跨度類中的寬度。我非常感謝你的幫助，指導我如何完成。

這是我在PHP代碼：

<div class="list-inline route-list-plane" > 
<?php echo $module->from; ?> 
<span class="plane-icon-wrapper"><i class="fa fa-plane plane-icon"></i></span> 
<?php foreach($package_location as $loc) { ?> 
<span><?php echo $loc->location; ?></span> 
<?php } ?> 
</div> 

這裏是基於上面的PHP代碼我的CSS和HTML代碼：

.route-list-plane { 
 
    padding: 0; 
 
    margin: 0; 
 
    color: #fff; 
 
    text-align: center; 
 
    background: #0097d6; 
 
} 
 
.plane-icon-wrapper { 
 
    display: inline-block; 
 
    width: 100px; 
 
    margin: 0 12px 0 10px; 
 
    position: relative; 
 
} 
 
.plane-icon { 
 
    -moz-transform: rotate(225deg); 
 
    -ms-transform: rotate(225deg); 
 
    -o-transform: rotate(225deg); 
 
    -webkit-transform: rotate(225deg); 
 
    transform: rotate(225deg); 
 
    -moz-animation: plane 5s infinite; 
 
    -o-animation: plane 5s infinite; 
 
    -webkit-animation: plane 5s infinite; 
 
    animation: plane 5s infinite; 
 
    position: absolute; 
 
    top: -12px; 
 
    margin-right: -10px; 
 
    padding: 0; 
 
} 
 
@-webkit-keyframes plane { 
 

 
    0% { 
 
     right: 0px; 
 
     opacity: 0; 
 
    } 
 
    25% { 
 
     right: 100%; 
 
     opacity: 1; 
 
     -moz-transform: rotate(225deg); 
 
     -ms-transform: rotate(225deg); 
 
     -o-transform: rotate(225deg); 
 
     -webkit-transform: rotate(225deg); 
 
     transform: rotate(225deg); 
 
    } 
 
    50% { 
 
     right: 100%; 
 
     opacity: 0; 
 
     -moz-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
     -webkit-transform: rotate(45deg); 
 
     transform: rotate(45deg); 
 
    } 
 
    75% { 
 
     right: 0; 
 
     opacity: 1; 
 
     -moz-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
     -webkit-transform: rotate(45deg); 
 
     transform: rotate(45deg); 
 
    } 
 
    100% { 
 
     right: 0; 
 
     opacity: 0; 
 
     -moz-transform: rotate(225deg); 
 
     -ms-transform: rotate(225deg); 
 
     -o-transform: rotate(225deg); 
 
     -webkit-transform: rotate(225deg); 
 
     transform: rotate(225deg); 
 
    } 
 
} 
 

 
@keyframes plane { 
 

 
    0% { 
 
     right: 0px; 
 
     opacity: 0; 
 
    } 
 
    25% { 
 
     right: 100%; 
 
     opacity: 1; 
 
     -moz-transform: rotate(225deg); 
 
     -ms-transform: rotate(225deg); 
 
     -o-transform: rotate(225deg); 
 
     -webkit-transform: rotate(225deg); 
 
     transform: rotate(225deg); 
 
    } 
 
    50% { 
 
     right: 100%; 
 
     opacity: 0; 
 
     -moz-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
     -webkit-transform: rotate(45deg); 
 
     transform: rotate(45deg); 
 
    } 
 
    75% { 
 
     right: 0; 
 
     opacity: 1; 
 
     -moz-transform: rotate(45deg); 
 
     -ms-transform: rotate(45deg); 
 
     -o-transform: rotate(45deg); 
 
     -webkit-transform: rotate(45deg); 
 
     transform: rotate(45deg); 
 
    } 
 
    100% { 
 
     right: 0; 
 
     opacity: 0; 
 
     -moz-transform: rotate(225deg); 
 
     -ms-transform: rotate(225deg); 
 
     -o-transform: rotate(225deg); 
 
     -webkit-transform: rotate(225deg); 
 
     transform: rotate(225deg); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div class="list-inline route-list-plane"> 
 
Koln<span class="plane-icon-wrapper"><i class="fa fa-plane plane-icon"></i></span> 
 
<span>Kuala Lumpur</span> 
 
<span>Singapore</span> 
 
<span>Bali</span> 
 
</div>

我想要在城市之間設置動畫移動平面。如何在span之前或之後設置城市之間的寬度？

**

正如你可以看到平面圖標包裝類設置爲100像素，這就是爲什麼 平面正確移動，但這種寬度沒有設置城市 之間基於跨前/後，而移動的飛機也不在那裏。如何將 正確設置？
我的意思之間（（吉隆坡 - 新加坡））之間（（新加坡 - 巴厘島））

**

在此先感謝

Answer 1

添加跨度類=」平面圖標包裝「內的foreach循環

<div class="list-inline route-list-plane" > 
<?php echo $module->from; ?> 
<?php foreach($package_location as $loc) { ?> 
<span><?php echo $loc->location; ?></span><span class="plane-icon-wrapper"><i class="fa fa-plane plane-icon"></i></span> 
<?php } ?> 
</div>