3

I have a basic list based horizontal navigation bar and everything works fine. But I've got to the point where I have so many navigation items that I need the link text to flow onto multiple lines.

Please see codepen and css below to see what I currently have.

The problem is that some links are just single words, so only need to be on one line. Those links are out of vertical align to the links on multiple lines. (See link)

Please can someone help me resolve this issue, so that all links are vertically aligned in the middle.

Thanks

-

http://codepen.io/anon/pen/poKru

-

HTML 

<ul class="group">
  <li><a href="#">This is<br />a Link</a></li>
  <li><a href="#">Another<br />Link</a></li>
  <li><a href="#">This link<br />is quite long</a></li>
  <li><a href="#">What can<br />I do...</a></li>
  <li><a href="#">...when<br />this happens?</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

CSS

ul {
  background: #001e78;
  border-radius: 5px;
  padding: 10px;
  margin: 0;
  width: 980px;
}

li {
  display: inline;
}

li:last-child a {
  border: none;
}

a {
  float: left;
  padding: 10px 12px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.1);
}

a:hover {
  background: rgba(255,255,255,0.1);
}

.group:after {
  content: "";
  display: table;
  clear: both;
}
Oliver Evans
  • 960
  • 1
  • 20
  • 43

1 Answers1

5

Just change your li declaration to 

li {
  display: inline-block;
  vertical-align: middle;
}

and you should be fine.

Here's my version http://codepen.io/anon/pen/urFGA

And Finally
  • 5,602
  • 14
  • 70
  • 110