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

Question

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

.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

上查看

Answer 2

如果可以删除那些浮动属性，则可以在布局中使用一些 table 技巧，例如：

.match-list {
  padding: 0;
  list-style-type: none;
}
.list-item {
  list-style: none;
  margin-bottom: 9px;
}

/*added stuff*/
.list-item {
  display: table;
  width: 100%;
}
.list-item > span {
  display: table-cell;
}

.list-item .image-col {
  width: 50px;
}
.list-item .empty-col {
  width: 50px;
  text-align: right;
}
.list-item .time-col {
  width: 50px;
  text-align: center;
}
.list-item .first-team {
  text-align: center;
}
.list-item .second-team {
  text-align: center;
}

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

你可以用 css calc():

.list-item .first-team {
  width: calc(50% - 150px); 
  text-align: right;
  float: left;

}

.list-item .second-team {
  width: calc(50% - 150px);     
  float: left;
  text-align: left;   
}

示例：http://jsfiddle.net/qqu2448n/

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

Set one span fixed width and other rest width

html

css