Question

我有一个包含4个项目的水平列表。第一项将始终52px宽。我希望剩余的三个项目的宽度相等，并填满剩余的空间。

我该怎么做？

.wa_talents .unlocks {
  width: 50px !important;
  background: black;
  font: normal 20px/52px"Palatino Linotype", "Georgia", "Times", serif;
  text-align: center;
}
.wa_talents .tier {
  list-style-type: none;
  border: 1px solid #221d19;
  box-shadow: 0 0 4px #000;
  height: 52px;
  margin: 5px;
  clear: left;
}
.wa_talents .tier li {
  float: left;
  margin-left: 5px;
  width: 30%;
  /* THIS FAILS HARD*/
  height: 52px;
}
.talent {
  background: #000;
}
.talent .cell {
  padding: 4px;
  margin-top: 2px;
  opacity: 0.25;
}
.talent .name {
  width: 125px;
  text-overflow: ellipsis;
  overflow: hidden;
  vertical-align: middle;
  line-height: 150%;
  color: #ffb100;
}
.talent.active .name {
  color: #fff;
}
.frame-36 {
  height: 36px;
  width: 36px;
}
.talent .icon-frame {
  display: inline-block;
  padding: 1px;
  background: #000 no-repeat 1px 1px;
  border-radius: 3px;
  border: 1px solid #434445;
  border-bottom-color: #2f3032;
  border-top-color: #b1b2b4;
  vertical-align: middle;
  margin-right: 5px;
}
.talent.active .cell {
  opacity: 1;
}
.talent.active {
  background: #5b2200;
  border-color: #ce5209;
  box-shadow: 0 0 8px #ce5209 inset;
}

<div class="wa_talents">
  <div class="tiers">
    <ul class="tier">
      <li class="unlocks">15</li>
      <li class="talent active">
        <a href="http://www.google.com" target="_blank">
          <div class="cell">
            <span class="icon-frame frame-36"></span>
            <span class="name">Foo</span>
          </div>
        </a>
      </li>
      <li class="talent">
        <a href="http://www.google.com" target="_blank">
          <div class="cell">
            <span class="icon-frame frame-36"></span>
            <span class="name">Bar</span>
          </div>
        </a>
      </li>
      <li class="talent">
        <a href="http://www.google.com" target="_blank">
          <div class="cell">
            <span class="icon-frame frame-36"></span>
            <span class="name">Baz</span>
          </div>
        </a>
      </li>
    </ul>

    <!-- HERE WILL BE SOME MORE ul#tier LISTS -->
  </div>
</div>

View On CodePen

Answer 1

如前所述，calc并未得到广泛支持。您可以在包含3个正确的

的附加div上使用overflow:hidden

http://codepen.io/anon/pen/WbVamx

编辑：错误的笔

Answer 2

纯CSS：http://codepen.io/saig/pen/EaqBZd

使用JavaScript：http://codepen.io/saig/pen/raXqEJ

var mainId = document.getElementById('main');
var calcWidth = mainId.clientWidth - 52;
var list = document.getElementsByTagName("li");
for(i=0; i < list.length; i++){
  if(list[i].classList.contains("talent")){
    list[i].style.width=Math.floor((calcWidth/mainId.clientWidth*100)/(list.length-1))-1+"%";

  }
}

Answer 3

在纯CSS中执行此操作的唯一方法是使用calc（）。您可以在此处查看文档和兼容性表：https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 4

最简单的解决方案是使用calc功能。在你的情况下，它将是：

.wa_talents .tier li {
    float: left;
    width: calc((100% - 52px - 20px)/3);
    height: 52px;
    margin-left: 5px;
}

该规则有点棘手：52是第一个li的宽度，然后您还需要减去项目之间的总余量（20px）。

Support：所有主流浏览器和IE9 +。

演示： http://codepen.io/anon/pen/raXqZG

如何填补剩余空间

4 个答案: