php - 宽度 100px 之前 span i 类 Font Awesome

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>

我想在城市之间设置动画移动平面。如何在跨度之前或之后设置城市之间的宽度？

**

As you can see plane-icon-wrapper class is set to 100px that's why plane is moving correctly, but this width is not set between cities based on span before/after, and moving plane is also not there. how to set it correctly?
I mean between ((Kuala Lumpur - Singapore)) and between ((Singapore - Bali))

**

提前致谢

Answer 1

在 foreach 循环中添加带有 class="plane-icon-wrapper"的 span

<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>