span I class font awesome之前的宽度为100px

Question

我想在span类之前或之后设置宽度，以便相应地设置我的代码。我非常感谢您的帮助，指导我如何完成它。

这是我在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之前或之后设置城市之间的宽度？

**

  

正如您所见，plane-icon-wrapper类设置为100px，这就是原因   平面移动正确，但城市之间没有设置此宽度   基于前后跨度，移动平面也不存在。如何   设置正确吗？
  我的意思是（（吉隆坡 - 新加坡））和（（新加坡 - 巴厘岛）之间）

**

提前致谢

Answer 1

使用class =＆＃34; plane-icon-wrapper＆＃34;添加span。在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>