It's caused by your anchors having a top padding equal to the height you want the crumbs to have. I removed that padding, gave the containing list element height:30px;
, gave the anchors line-height:30px;
so they remain vertically centered.
#crumbs ul li {
display: inline-block;
height:30px;
}
#crumbs ul li a { /* The block part of each breadcrumb; the text in each breadcrumb */
display: block;
line-height:30px;
background: #327098;
/*text-align: center; */
padding: 0 10px 0 80px; /* size of each breadcrumb */
position: relative;
margin: 0 5px 0 0;
font-size: 16px;
text-decoration: none;
color: #000000;
}
Edit
I'm not sure what you mean by them existing separately. I just copied the code you provided into a fiddle and ran it. And I saw the apparent issue and I did what I could. Here's the issue that I saw. http://jsfiddle.net/ZH6BW/