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 に答える