The simplest solution is to change the
li
to
display: inline-block
, and set its height to
100%
:
li {
display: inline-block;
border-right: 3px solid #1e272e;
height: 100%;
}
Demo[
^]
If you can drop support for
older browsers[
^], you could use
Flexbox[
^] instead:
ul {
background: #596275;
height: 10vh;
display: flex;
list-style-type: none;
}
li {
border-right: 3px solid #1e272e;
}
Demo[
^]