CODEWITHSUNDEEP
htmlcss
Madam Zu Zu
Madam Zu Zu

Reputation: 6605

Changing height and width on the LI elements of the horizontal list

I am making a little color code legend and can't figure out how to make all my <li> items the same height as the <div> they are in and widen them out so that they fill the whole <div>, not just the area around the <label> text. Or maybe someone has another suggestion to make it look better?

#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

Upvotes: 0

Views: 1858

Answers (2)

showdev
showdev

Reputation: 29168

The <li> and <label> elements are inline, so neither height nor width have any impact. I set them to display:block. I also floated <li> elements left and set their height and width.

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

Upvotes: 3

Garrett
Garrett

Reputation: 770

I recommend removing the label tags and moving each class to the li, like this:

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

Then if you change the li display to inline-block you can specify a set height for them. You can also center the text of each li.

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

As you can see here: http://jsfiddle.net/SFZJv/2/

I added a grey background for reference.

Upvotes: 1

Related Questions