Geek asks and answers

Align text on twitter bootstrap nav-list

I want the text aligned left and right inside the same element <li>in nav-listTwitter Bootstrap. Here is my code:

<ul class="nav nav-list">
  ...
  <li class="active"><a href="/">All<p class="pull-right">100</p></a></li>
  <li><a href="/mon/warnings/">Warning<p class="pull-right">100</p></a></li>
  <li><a href="/mon/errors/">Error<p class="pull-right">100</p></a></li>
  ...
</ul>

And here is what it looks like:

enter image description here

EDIT: Thanks everyone for the answers. Solved this problem this way:

  • replace <p>with<span>
  • add class="clearfix"to <li>alements
+5
source share
3 answers

OPTION ONE: CHANGE MARKER:

Just change your markup. Place <p>outside anchor marks.

<ul class="nav nav-list">
  <li class="active"><a href="/">All</a><p class="pull-right">100</p></li>
  <li><a href="/mon/warnings/">Warning</a><p class="pull-right">100</p></li>
  <li><a href="/mon/errors/">Error</a><p class="pull-right">100</p></li>
</ul>


.pull-right {float:right;}

OPTION TWO: CHANGE CSS:

Otherwise, if <p>needed inside the anchor tag, you can do something like this.

a { 
display:block;       
width:100%;
}

p{ float:right;}

: (, css reset )

http://jsfiddle.net/vRSMZ/1/

+1

HTML:

   <ul class="nav nav-list">
      ...
    <li class="active"><a href="/"><label>All</label><span>100</span></a><div class="clr"></div></li>
    <li><a href="/mon/warnings/"><label>Warning</label><span>100</span></a><div class="clr"></div></li>
    <li><a href="/mon/errors/"><label>Error</label><span>100</span></a><div class="clr"></div></li>
      ...
    </ul>

CSS

.nav-list ul li a{ padding:5px 10px; display:block;}
.nav-list ul li a label{ cursor:pointer; display:block; float:left; width:80%;}
.nav-list ul li a span{ cursor:pointer; display:block; float:left; width:20%; text-align-right;}

.clr{ clear:both;}

.. .

+1

HTML:

<ul class="nav nav-list">
  ...
<li class="active"><a href="/">All<span class="num">100</span></a></li>
<li><a href="/mon/warnings/">Warning<span class="num">100</span></a></li>
<li><a href="/mon/errors/">Error<span class="num">100</span></a></li>
  ...
</ul>

CSS

.num{
float: right;
}

I changed your <p>to <span>because it makes more sense ... Then we added the class .numsto the span and swam correctly.

0
source

More articles:


All Articles