0

我正在制作一个小的颜色代码图例，但不知道如何使我的所有<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>

在 jsFiddle 上查看

4

2 回答 2

3

<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>

于 2013-04-16T19:50:04.177 回答
1

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

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

然后，如果您将 li 显示更改为 inline-block，您可以为它们指定一个设置高度。您还可以将每个 li 的文本居中。

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

正如你在这里看到的：http: //jsfiddle.net/SFZJv/2/

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

于 2013-04-16T19:48:14.723 回答