如何在之前和同一行正确制作ul span margin？

Question

以下是我的CSS和HTML代码：

＆＃13;

＆＃13;

.route-list {
  padding: 0;
  margin: 0;
  color: #fff;
  text-align: center;
  padding: 6px 9px 7px;
  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);
  }
}
.route-list span + span:before {
  font-size: 16px;
  line-height: 20px;
  display: inline-block;
  vertical-align: top;
  content: "\f072";
  font-family: "FontAwesome";
  -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;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
<ul class="list-inline route-list same-height-right" style="height: 33px;">
  Manila
  <span class="plane-icon-wrapper"><i class="fa fa-plane plane-icon"></i></span>
  <span>Kuala Lumpur</span>
  <span>Singapore</span>
  <span>Bali</span>
</ul>

＆＃13;

＆＃13;

＆＃13;

我试图解决之前的差距，但似乎有些东西我无法正确修复。

我希望在同一行中设置它，并且城市和平面图标之间的自动宽度设置为动画。

如何在城市之间制作相同的行和自动宽度？ （（相同）） 我也使用bootstrap css，即使在移动视图小屏幕尺寸下如何解决它？

这就是我想要的：

  

1：单行2：响应3：城市之间的自动宽度4：固定   宽度即使在狭窄的大小，文本将根据大小调整大小   宽度。那怎么做呢？

提前致谢