Set Height of li using simple CSS

Question

I'm trying to create a model using ul li what I need is

and I'm getting something like

the problem here I'm facing is the height of li, there is no height above the first row and below the last row in first image but I'm getting it into 2nd image, my code is

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>.....</li>
</ul>

css

.appul {
        list-style: none;
    }
    .appul li {
        border-right: 2px solid #CCC;
        float: left;
        padding: 0px 15.6px;
        line-height: 50px;
    }
    .appul li:nth-child(5n) {
        border-right: none;
    }
    .appul li a {
        color: #00c8cf;
        font-size: 18px;
        cursor: pointer;
    }
    .appul li a:hover {
        color: #00c8cf;
    }

@fcalderan, that question did not solve my problem, that's why I'm asking with images as well — Kashif Latif, Feb 09 '16 at 12:37
Is it 1 big `ul` or can it be divided into rows as I did in my answer? — Asons, Feb 09 '16 at 13:06
@Chris I'm using line-height just for testing, it's not mandatory — Kashif Latif, Feb 10 '16 at 07:18

Asons · Accepted Answer · 2016-02-10T10:28:51.793

Updated

Here is used padding instead of line-height to achieve a distance between the time items, where I set a main top padding on all and the removed it again for the first 5.

.appul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
  
}
.appul:before,
.appul:after {
  content: ' ';
  position: absolute;
  display: block;
  border-color: #CCC;
  border-width: 0 2px;
  border-style: solid;
  top: 0;
  left: 20%;
  width: 20%;
  height: 100%;
  pointer-events: none;   /* Alt. 1: let mouse event pass through   */
  z-index: -1;            /* Alt. 2: put pseudo elements beneath    */
}
.appul:after {
  left: 60%;
}

.appul li {
  float: left;
  box-sizing: border-box;
  width: 20%;
  vertical-align: top;
  padding: 30px 0 5px;
  text-align: center;
}
.appul li:nth-child(-n+5) {
  padding-top: 5px;
}
.appul li a:hover {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:45</li>
  <li>09:00</li>
  <li>09:15</li>
  <li>09:30</li>
  <li>09:45</li>
  <li>10:00</li>
  <li>10:15</li>
  <li>10:30</li>
  <li>10:45</li>
</ul>

If you do want to change column length to less or more than 5, this variant could be useful

.appul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(90deg, #ccc 2px, transparent 2px);
  background-size: calc(20% + 4px) 100%;
  background-position: calc(25% - 4px) 100%;
}
.appul li {
  float: left;
  box-sizing: border-box;
  width: 20%;
  vertical-align: top;
  padding: 30px 0 5px;
  text-align: center;
}
.appul li:nth-child(-n+5) {
  padding-top: 5px;
}
.appul li a:hover {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:45</li>
  <li>09:00</li>
  <li>09:15</li>
  <li>09:30</li>
  <li>09:45</li>
  <li>10:00</li>
  <li>10:15</li>
  <li>10:30</li>
  <li>10:45</li>
</ul>

@Paulie_D It appears to be 5 in each row .. but of course, the underlying code could be 1 big `ul`, which makes my solution not work so well anymore. .. I will ask OP and if so, delete (or change to another solution) — Asons, Feb 09 '16 at 13:05
@KashifLatif Need to run now, but will be back in an hour ... do you want the gray lines to go all the way even if there are no more time items? — Asons, Feb 10 '16 at 08:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/103069/discussion-between-kashif-latif-and-lgson). — Kashif Latif, Feb 10 '16 at 10:06

score 0 · Answer 2 · answered Feb 09 '16 at 13:03

0

It is very critical to achieve design like this using ul li. But, if you are able to add remaining empty li elements in the last row then do check this fiddle link

fiddle link https://jsfiddle.net/SolaceInfotech/y91rosyu/

that might help you.

answered Feb 09 '16 at 13:03

PHPExpert

945
5
9

Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Feb 09 '16 at 13:07
still getting issue with border – Kashif Latif Feb 10 '16 at 07:21

score 0 · Answer 3 · answered Feb 09 '16 at 13:06

As others have mentioned you don't need to use line-height here...just adjust the respective paddings.

Also a box-sizing would be useful.

Finally...there is no such thing as .6 of a pixel. Use integers for that as different browsers may round differently.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.appul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.appul li {
  border-right: 2px solid #CCC;
  border-bottom: 1px dotted red;
  /* for demo only */
  float: left;
  padding: 0 24px 36px;
}
.appul li:nth-child(5n) {
  border-right: none;
}
.appul li:nth-child(5n+1) {
  clear: both;
}
.appul li a {
  color: #00c8cf;
  font-size: 18px;
  cursor: pointer;
}
.appul li a:hover {
  color: #00c8cf;
}

<ul class="appul">
  <li>08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:45</li>
  <li>09:00</li>
  <li>09:15</li>
  <li>09:30</li>
  <li>09:45</li>
  <li>10:00</li>
  <li>10:15</li>
  <li>10:30</li>
  <li>10:45</li>
  <li>10:30</li>
  <li>10:45</li>

</ul>

score 0 · Answer 4 · answered Feb 09 '16 at 13:29

Try this: https://jsfiddle.net/dpyjbqjv/

html:

<ul class="appul">
  <li class="first-row">08:00</li>
  <li class="first-row">08:15</li>
  <li class="first-row">08:30</li>
  <li class="first-row">08:30</li>
  <li class="first-row">08:00</li>
  <li>08:15</li>
  <li>08:30</li>
  <li>08:30</li>
  <li>08:00</li>
  <li>08:15</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
  <li class="last-row">08:30</li>
</ul>

css:

.appul {
  list-style: none;
  width: 400px;
}

.appul li {
  border-right: 2px solid #CCC;
  float: left;
  padding: 20px;
}

.appul li:nth-child(5n) {
  border-right: none;
}

.appul li.first-row {
  padding-top: 0;
}

.appul li.last-row {
  padding-bottom: 0;
}

Set Height of li using simple CSS

4 Answers4