horizontally align breadcrumbs - CSS


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.

<a href="http://jsfiddle.net/y9tyc2cu/1/" rel="nofollow">http://jsfiddle.net/y9tyc2cu/1/</a>


<div class="chatWrapper"> <div class="chatContainer"> <div class="chatMsgWrapper"> <ul id="crumbs"> <li><a href="#">Home</a> </li> <li><a href="#">Main section</a> </li> <li><a href="#">Sub section</a> </li> <li><a href="#">Sub sub section</a> </li> </ul> </div> </div> </div>


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; }


<a href="http://jsfiddle.net/y9tyc2cu/4/" rel="nofollow"><strong>Here</strong></a> is the solution. float: none; for each li and display: inline; for ul.


Check here! if you are a bootstrap user you need you should have <a href="http://getbootstrap.com/2.3.2/components.html#breadcrumbs" rel="nofollow">bootstrap.min.js</a>

<a href="http://getbootstrap.com/2.3.2/components.html#breadcrumbs" rel="nofollow">http://getbootstrap.com/2.3.2/components.html#breadcrumbs</a>

<ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul>


just add display:inline and remove float: left from li


<a href="http://jsfiddle.net/y9tyc2cu/3/" rel="nofollow">http://jsfiddle.net/y9tyc2cu/3/</a>


You have two redundant styles for the li.

You may <strong>remove</strong> 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; }

<em>Your updated fiddle: <strong><a href="http://jsfiddle.net/abhitalks/y9tyc2cu/2/" rel="nofollow">http://jsfiddle.net/abhitalks/y9tyc2cu/2/</a></strong></em>


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; }

<em>Updated fiddle: <strong><a href="http://jsfiddle.net/abhitalks/y9tyc2cu/6/" rel="nofollow">http://jsfiddle.net/abhitalks/y9tyc2cu/6/</a></strong></em>



  • Remove trail from Woocommerce product search result page
  • Why can't I use an HOC in React here?
  • When getting Document object from Word.Application object, its members are not filled from gencache
  • CLOSED!! How i can detect the type from a string in Scala?
  • OpenOptionsMenu not working with ActionBarSherlock Custom SubMenu
  • Struct pointer casts
  • is it possible to insert a line break in this tooltip?
  • Floated image with variable width and heading with background image
  • Simulate click Geckofx vb,net
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • HTML download movie download link
  • How to set/get protobuf's extension field in Go?
  • Modifying destination and filename of gulp-svg-sprite
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • How to show dropdown in excel using jrxml (jasper api)?
  • jquery mobile loadPage not working
  • How to delete a row from a dynamic generate table using jquery?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How do I configure my settings file to work with unit tests?
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • Turn off referential integrity in Derby? is it possible?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Add sale price programmatically to product variations
  • Binding checkboxes to object values in AngularJs
  • Unable to use reactive element in my shiny app
  • How do I use LINQ to get all the Items that have a particular SubItem?