更改水平列表的LI元素的高度和宽度

Question

我正在为网站制作一个小的颜色代码图例，并且无法弄清楚如何使我的所有<li>项目与它们所处的div相同的高度并将它们展开以使它们填满整个div，不仅仅是标签文本周围的区域（或者是另一个让它看起来更好的建议？）

这就是我现在所拥有的：

http://jsfiddle.net/JZCKm/

我觉得我在网上尝试了很多不同的例子，但我仍然无处可去。请协助

Answer 1

您的LIs和labels是内联元素，没有高度或宽度。我将display:block应用于您的LIs和labels，向左移动了LIs，并将高度和宽度应用于LIs。

ul#navlist {
  list-style:none;
}
#navlist li {
  position:relative;
  float:left;
  padding-right: 30px;
  width:120px;
  height:50px;
}
#navlist li label {
  position:relative;
  display:block;
  height:100%;
  width:100%;
}

http://jsfiddle.net/JZCKm/3/

Answer 2

我建议删除标签标签并将每个类移动到li，如下所示：

<li Class="gvRowReqComplete">Complete</li>

然后，如果将li显示更改为内联块，则可以为它们指定设置高度。您也可以将每个li的文本居中。

li {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    padding: 6px 12px;
}

正如您在此处所见：http://jsfiddle.net/SFZJv/2/

我添加了灰色背景供参考。