我如何在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;的块元素展开以占据其父级的全部宽度。

Answer 2

display:block;

如果发布一些代码，将会更容易给出答案

Answer 3

如果您希望它们并排排列，请使用：

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    float:left;
    width:25%;
  }

工作示例：http://jsbin.com/oqawud/edit

如果您希望它们堆叠，请使用：

  ul {
    list-style:none;
    width:600px;
    padding:0;
    overflow:auto;
  }
  li {
    width:auto;
  }

工作示例：http://jsbin.com/oqawud/2/edit

Answer 4

也许是这样的......

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<style>
ul{
  width:600px;
  list-style:none;
}

li{
  float:left;
  width:25%;
}
</style>

Answer 5

发布的大多数解决方案都要求您明确将每个li的宽度设置为25％。我个人发现这可能会在li的文本两侧出现不一致的空白区域，所以在这种情况下，我更喜欢使用表来解决这个问题。

这样可行，您可以改进它的外观，但它可以满足您的需求：http://jsbin.com/oqawud/11