html - 如何在线元素之间创建相等的间距

Question

下面是我的 Angular JS 网络应用程序的 HTML 代码:

<div class="choice" >
   <br> <br> 
   <ul>
      <li class="players" ng-repeat="player in players">
         <img ng-src="{{player.image}}"><br><br>     
         <span class="glyphicon glyphicon-user"></span> {{player.name}} <br> 
         <span class="glyphicon glyphicon-flag"></span> {{player.Team}} <br> 
         <span class="glyphicon glyphicon-tag"></span>₦{{player.price}} <br>
         <span class="glyphicon glyphicon-knight"></span>{{player.position| uppercase }}<br>
         <span class="glyphicon glyphicon-info-sign"></span>{{player.Status}}
         <br>
         <button class="btn btn-secondary btn-sm" ng-class="{'btn-danger': history.indexOf(player) >= 0 }" ng-click="buy(player)">{{history.indexOf(player)>=0?'REMOVE':'SELECT'}}</button>
      </li>
   </ul>
   <br><br>
   <button type="submit" class="btn btn-lg btn-primary btn-md " ng-disabled="history.length<6" ng-disabled="getTotal<0" ng-click="saveTeam()" > Save Team </button>
   <br><br>
</div>

下面是CSS:

.choice{
    background: white;
    color: #333;
    font-size: 13px;
}

.choice ul {
    list-style: none;
}

.choice img {
    max-height: 100px;
    max-width: 65px;
    margin-top: 7px;
}

.players{
    display: inline-table;
    float: left;
    text-align: left;     
}

我的问题:

我遇到的问题是行元素之间的间距在列表元素之间不一致。根据玩家名字的长度，一个玩家和下一个玩家之间的空格显示不一致。我曾希望使用 flex: left; 可以解决这个问题，但事实并非如此。有没有办法使列表元素之间的间距相等？

Answer 1

使用ulClass在你的类(class) <ul>标签。及其CSS如下

.ulClass{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}