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

Question

我正在制作一个小颜色代码图例，但不知道如何制作我所有的 <li>与 <div> 高度相同的元素他们进来并扩大他们，以便他们填满整个<div> ，不仅仅是<label>周围的区域文本。或者也许有人有其他建议可以让它看起来更好？

#navlist li {
  display: inline;
  list-style-type: none;
  padding-right: 30px;
}

#navcontainer {
  background-color: White;
  text-align: center;
  border-spacing: 2px;
  border-color: gray;
}

#legendTitle {
  background-color: #ABAAC1;
  font-weight: bold;
  color: White;
  padding: 5px;
}

.gvRowReqIncomplete {
  background-color: #FAFAD2;
  color: Red;
}

.gvRowReqAlmostComplete {
  background-color: #FAFAD2;
  color: Black;
  font-weight: bold;
}

.gvRowReqComplete {
  background-color: #ededf2;
  color: Black;
  font-weight: bold;
}

.gvRowSubReq {
  background-color: #fbfbfb;
  color: Black;
}

<div id="navcontainer">
  <div id="legendTitle">Color Legend</div>
  <br />
  <ul id="navlist">
    <li><label Class="gvRowReqComplete">Complete</label></li>
    <li> <label Class="gvRowReqAlmostComplete">Partially Complete </label></li>
    <li>
      <Label Class="gvRowReqIncomplete">Incomplete Request</label>
    </li>
    <li>
      <Label Class="gvRowSubReq">Response</label>
    </li>
  </ul>
</div>

View on jsFiddle

Answer 1

<li>和 <label>元素是内联的，所以高度和宽度都没有任何影响。我将它们设置为 display:block .我也飘了<li>元素离开并设置它们的高度和宽度。

#navlist {
  list-style: none;
}

#navlist li {
  float: left;
  padding-right: 30px;
  width: 120px;
  height: 50px;
}

#navlist li label {
  display: block;
  height: 100%;
  width: 100%;
}

#navcontainer {
  background-color: White;
  text-align: center;
  border-spacing: 2px;
  border-color: gray;
}

#legendTitle {
  background-color: #ABAAC1;
  font-weight: bold;
  color: White;
  padding: 5px;
}

.gvRowReqIncomplete {
  background-color: #FAFAD2;
  color: Red;
}

.gvRowReqAlmostComplete {
  background-color: #FAFAD2;
  color: Black;
  font-weight: bold;
}

.gvRowReqComplete {
  background-color: #ededf2;
  color: Black;
  font-weight: bold;
}

.gvRowSubReq {
  background-color: #fbfbfb;
  color: Black;
}

<div id="navcontainer">
  <div id="legendTitle">Color Legend</div>
  <ul id="navlist">
    <li>
      <label Class="gvRowReqComplete">Complete</label>
    </li>
    <li>
      <label Class="gvRowReqAlmostComplete">Partially Complete</label>
    </li>
    <li>
      <Label Class="gvRowReqIncomplete">Incomplete Request</label>
    </li>
    <li>
      <Label Class="gvRowSubReq">Response</label>
    </li>
  </ul>
</div>