CODEWITHSUNDEEP
htmlcsstwitter-bootstrapalignment
aleosd
aleosd

Reputation: 133

Align text within twitter bootstrap nav-list

I want to have text aligned left and right inside the same <li> element in nav-list of Twitter Bootstrap. Here's 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 how it looks:

enter image description here

EDIT: Thanks all for replies. Solved this problem in such way:

Upvotes: 5

Views: 3970

Answers (3)

Hassaan
Hassaan

Reputation: 326

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

Note: Adjust the width of text in the left on label and numbers on the right on span accordingly.

Upvotes: 1

khollenbeck
khollenbeck

Reputation: 16157

OPTION ONE: CHANGE THE MARKUP:

Just change your markup a bit. Put the <p> outside of the anchor tag.

<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 THE CSS:

Otherwise if the <p> is needed inside of the anchor tag then you could do something like this.

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

p{ float:right;}

EXAMPLE: (note I am using a css reset in my example)

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

Upvotes: 1

brbcoding
brbcoding

Reputation: 13586

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 that makes more sense... Then added a .nums class to the span, and floated that right.

Upvotes: 0

Related Questions