Breadcrumb in single line - html

Question

I am using Twitter Breadcrumb in my html page. But the breadcrumb keeps appearing in a new line. How can I make it come next to the glyphicon?
This is the div section:
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li ng-repeat="crumb in breadcrumb track by $index">
{{crumb}}
</li>
</ul>
<hr>
<p>
<ul ng-repeat="node in nodes" class="list-unstyled">
<li ng-repeat="value in node">{{value}}</li>
</ul>
</p>
</div>
How it looks now:
There are unwanted spaces in the top and bottom. But I want the list to appear next to the glyphicon as if they are in a new line.

Answer 1

Just add some CSS inline. <ul> elements are automatically block-level elements. I believe that Bootstrap automatically adds glyphicons to be display: inline-block as well so it can apply with and margins to the icon.
Fiddle for you
span.glyphicon-folder-close,
ul.breadcrumb {
display: inline;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
.....
.....
Addition:
Here's another way of doing it. Wrap the span and ul in it's own separate container so they float together. You have to remove the padding for the ul.breadcrumb as it's auto applied.
Add containers fiddle
ul.breadcrumb {
padding: 0;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<div class="col-xs-1">
<span class="glyphicon glyphicon-folder-close"></span>
</div>
<div class="col-xs-11">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
</div>
....
....
Addition #3 (worked best for OP)
Here's an even better way. Just use psuedo selector for the breadcrumb and remove the span altogether. Also remove the <hr> tag and add border to the breadcrumb itself
Fiddle w/ psuedo
ul.breadcrumb {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
ul.breadcrumb:before {
position: absolute;
content: '\e117';
font-family: 'Glyphicons Halflings';
left: -10px;
top: 8px;
width: 20px;
height: 20px;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
....
....

Answer 2

It may be due to the parent div width is not enough for show all.