Question

以下是我的角度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标记中使用<ul>类。和它的css如下

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

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

1 个答案: