Question

我正在使用ul和li标签创建匹配列表。但是，我想将一些跨度设置为固定宽度，然后将其余跨度应用于相等的剩余宽度。在我的例子中有3个跨度，宽度为10px。我希望第一个团队和第二个团队类填充其余的宽度，我怎么能用百分比来做？

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果你可以删除那些浮动属性，你可以在布局上使用一些表格技巧，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

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/

设置一个跨度固定宽度和其他休息宽度

3 个答案: