html - 我如何适应 ul 中 li 的宽度？

Question

我有一个宽度为 600px 的 ul，我有 4 个 li，它们没有占据整个 600px。我如何自动调整 li 以使其占用整个 600px？我不想对 li 的宽度进行硬编码，因为我在不同位置使用类。下面是屏幕截图，我试图设置菜单“最新，热门投票事件”以适应整个 ul。

    #content-tabs {
  background-color: #78ae09;
  float: left; /* LTR */
  margin: 20px 0;
  padding: 0;
-moz-box-shadow: 0px 2px 3px #c4c4c4;-webkit-box-shadow: 0px 2px 3px #c4c4c4;box-shadow: 0px 2px 3px #c4c4c4;

}

#content-tabs ul.primary,
#content-tabs ul.secondary {
/*  border-bottom: 1px solid #000;*/
  clear: both;
  float: left; /* LTR */
  margin: 0;
  padding: 7px 10px 0px 0px;
  width:100%;
}

#content-tabs ul.secondary {
  border-bottom: 1px solid #555;
  margin-top: 10px;
  text-transform: lowercase;
}

#content-tabs ul.primary li,
#content-tabs ul.secondary li {
  border-style: none;
  display: inline-block;
  float: left; /* LTR */
  list-style: none;
  margin: 0 10px;
  padding: 0;
  white-space:nowrap;
}

#content-tabs ul.primary li a:link,
#content-tabs ul.primary li a:visited,
#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  background-color: transparent;
  border: none;
  color: #fff;
  float: left; /* LTR */
  font-weight: bold;
  margin: 0;
  padding: 3px 0 6px 0;
  text-decoration: none;
  white-space: nowrap;
}

#content-tabs ul.secondary li a:link,
#content-tabs ul.secondary li a:visited {
  color: #555;
}

#content-tabs ul.primary li a.active:link,
#content-tabs ul.primary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.secondary li a.active:link,
#content-tabs ul.secondary li a.active:visited {
  color: #fff;
  padding-bottom: 2px;
}

#content-tabs ul.primary li a:hover,
#content-tabs ul.primary li a:focus,
#content-tabs ul.secondary li a:hover,
#content-tabs ul.secondary li a:focus {
  color: #fefefe;
  padding-bottom: 2px;
  font-weight:bold;
}

Answer 1

width: auto; 会这样做，除非有其他影响大小的冲突规则(例如，display: inline; 会导致问题)。

width: auto; 的 block 元素展开以占据其父元素的整个宽度。