中心跨度在 li 相同位置

Question

我使用 li 和 ul 标签创建了一个匹配列表。然而，即使我已经将中心跨度应用到固定宽度并且两个团队跨度到其余部分，它似乎还是创建了不同的宽度。我怎样才能让这些团队跨越相同的宽度和时间跨度总是在中心？

.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;
}

<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 1

这是你想要的吗？？

            .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}

<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>

Answer 2

您指定了 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>

中心跨度在 li 相同位置

Center span in li same position

html

css