horizontally align breadcrumbs - CSS - css

Question

I am having a hard time aligning the breadcrumbs horizontally.
There is an existing style sheet for the container divs and something in it is preventing the output.
The ul li appear one below the other.
http://jsfiddle.net/y9tyc2cu/1/
HTML:
<div class="chatWrapper">
<div class="chatContainer">
<div class="chatMsgWrapper">
<ul id="crumbs">
<li>Home
</li>
<li>Main section
</li>
<li>Sub section
</li>
<li>Sub sub section
</li>
</ul>
</div>
</div>
</div>
CSS:
ul#crumbs, ul#crumbs li {
list-style-type:none;
padding:0;
margin:0;
}
#crumbs {
height:2.3em;
border:1px solid #dedede;
}
#crumbs li {
float:left;
line-height:2.3em;
color:#777;
padding-left:.75em;
}
#crumbs li a {
/*background:url(/Assets/Images/crumbs.gif) no-repeat right center;*/
background:gray;
padding:5px 15px 5px 0;
}

Answer 1

Here is the solution. float: none; for each li and display: inline; for ul.

Answer 2

Check here!
if you are a bootstrap user you need
you should have bootstrap.min.js
http://getbootstrap.com/2.3.2/components.html#breadcrumbs
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li>Library <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>

Answer 3

just add display:inline and remove float: left from li
example
http://jsfiddle.net/y9tyc2cu/3/

Answer 4

You have two redundant styles for the li.
You may remove this style:
.chatContainer ul li{
float: left; clear: both; margin: 10px 0;
width: 100%; padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Also, make the li as display: inline-block or clear the floats properly:
#crumbs li {
display: inline-block;
line-height: 2.3em;
color: #777;
padding-left: .75em;
}
Your updated fiddle: http://jsfiddle.net/abhitalks/y9tyc2cu/2/
Update:
As per your comment, you can't remove or change an existing style. In that case, you need to override the styles which are set in the earlier defined style. Just add these two overrides in #crumbs li style, without changing or removing anything elsewhere:
width: auto; float: none;
So, your complete style now looks like this:L
#crumbs li {
display: inline-block;
line-height: 2.3em;
color: #777;
padding-left: .75em;
width: auto;
float: none;
}
Updated fiddle: http://jsfiddle.net/abhitalks/y9tyc2cu/6/
.