html - 设置一个跨度固定宽度和其他剩余宽度

Question

我正在使用 ul 和 li 标签创建一个匹配列表。但是我想将一些跨度设置为固定宽度，然后将其余跨度应用到相等的剩余宽度。在我的示例中，有 3 个宽度为 10px 的跨度。我想让第一队和第二队的类(class)填满剩余的宽度我该如何使用百分比来做到这一点？

.match-list {
    
    padding: 0;
    list-style-type: none;
    
    
}

.list-item {
list-style: none;
margin-bottom: 9px;
  
}

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

    float: left;
    
}

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

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

.list-item .first-team {
    
    text-align: right;
    float: left;
    
}

.list-item .second-team {
    
    float: left;
    text-align: left;
    
}

<div>
    <ul class="match-list">
        <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">empty</span>
        </li>
        
        
    </ul>
    
    
</div>

Answer 1

你可以使用 flexbox

CSS

.list-item {
  list-style: none;
  margin-bottom: 9px;
  display:flex;
  direction:row;
}

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

}

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

在 Codepen 上查看