中心跨度相同

Question

我已经使用li和ul标签创建了一个匹配列表。然而，尽管我已将中心跨度应用于固定宽度，并且两个团队跨越其余部分，但无论如何它似乎创造了不同的宽度。我如何让这些团队跨度相同的宽度和时间跨度总是在中心？

＆＃13;

＆＃13;

.matches {

    width: 100%;

}

.match-list {
    
padding: 0px;
display: block;
list-style-type: disc;


    
}

.list-item {
  list-style: none;
  margin-bottom: 10px;
  display:flex;
  direction:row;
  border-bottom: 1px dotted #DDDDDD;
  padding-bottom: 10px;
}

.list-item .image-col {
     order:1;
    width: 50px;

    float: left;
    
}

.list-item .empty-col {
    order:5;
    width: 50px;
    text-align: right;
    float: left;
    
}

.list-item .time-col {
 order:3; 
    width: 50px;
    text-align: center;
    float: left;
    
}

.list-item .first-team {
order:1;
flex-grow:2;
text-align: right;
float: left;
background-color: #343533;
}

.list-item .second-team {
order:4;
flex-grow:2;
float: left;
text-align: left;
  background-color: #444444;
}

＆＃13;

<div class="matches">
    <ul class="match-list">
        <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team teeest</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
        
                <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
        
        
    </ul>
    
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你指定了flex-grow，但没有flex-basis，所以它们是从不同的基础上增长的（自然宽度）

.matches {
    width: 100%;
}

.match-list {
    padding: 0px;
    display: block;
    list-style-type: disc;
}

.list-item {
    list-style: none;
    margin-bottom: 10px;
    display:flex;
    direction:row;
    border-bottom: 1px dotted #DDDDDD;
    padding-bottom: 10px;
}

.list-item .image-col {
    order:1;
    width: 50px;
    float: left;
}

.list-item .empty-col {
    order:5;
    width: 50px;
    text-align: right;
    float: left;
}

.list-item .time-col {
    order:3; 
    width: 50px;
    text-align: center;
    float: left;
}

.list-item .first-team {
    order:1;
    flex-grow:2;
    text-align: right;
    float: left;
    background-color: #343533;
    flex-basis: 0;
}

.list-item .second-team {
    order:4;
    flex-grow:2;
    flex-basis: 0;
    float: left;
    text-align: left;
    background-color: #444444;
}

<div class="matches">
    <ul class="match-list">
        <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team teeest</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
        
        <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
    </ul>
</div>

Answer 2

这是你想要的吗？

＆＃13;

＆＃13;

            .matches {

    width: 100%;

}

.match-list {
    
padding: 0px;
display: block;
list-style-type: disc;


    
}

.list-item {
  list-style: none;
  margin-bottom: 10px;
  display:flex;
  direction:row;
  border-bottom: 1px dotted #DDDDDD;
  padding-bottom: 10px;
}

.list-item .image-col {
     order:1;
    width: 50px;

    float: left;
    
}

.list-item .empty-col {
    order:5;
    width: 50px;
    text-align: right;
    float: left;
    
}

.list-item .time-col {
 order:3; 
    width: 50px;
    text-align: center;
    float: left;
    
}

.list-item .first-team {
order:1;
flex-grow:2;
text-align: right;
float: left;
background-color: #343533;
}

.list-item .second-team {
order:4;
flex-grow:2;
float: left;
text-align: left;
  background-color: #444444;
}
.list-item span{color: white;width:40%}
.list-item .time-col{color:gray}

＆＃13;

<div class="matches">
    <ul class="match-list">
        <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team teeest</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
        
                <li class="list-item">
            <span class="image-col">img</span>
            <span class="first-team">First team</span>
            <span class="time-col">12:00</span>
            <span class="second-team">Second team</span>
            <span class="empty-col">lol</span>
        </li>
        
        
    </ul>
    

＆＃13;

＆＃13;

＆＃13;