Как создать равный интервал между линейными элементами

Question

Ниже приведен HTML-код моего углового веб-приложения JS:

<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 класс в вашем <ul> теге.и его CSS, как показано ниже

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