3 phrases on the same line, please help

[immanuelx2]

Hi, im trying to get my pagination links to show up organized like so:

 

PREV              1 2 3                NEXT

 

with the PREV floated left and the NEXT floated right, while the 1 2 3 are text-align: center'd... How should I go about it?

 

This is what I have come up with and it did not work:

 

.left {float:left;}
.right {float:right;}
.center {text-align:center;}

<p class="left">PREV</p>
<p class="center">1 2 3</p>
<p class="right">NEXT</p>

 

any help is appreciated!

[Philip]

Try using a span on the next button:

 

<span class="right">NEXT</span>
<p class="left">PREV</p>
<p class="center">1 2 3</p>

 

If you don't use a span, the text-align will automatically break the line after the centered text.

[soycharliente]

CSS:

.floatleft { float: left; }
.floatright { float: right; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.w_33 { width: 33%; }

 

HTML:

<div>
<div class="floatleft right w_33">PREV</div>
<div class="floatleft center w_33">1 2 3</div>
<div class="floatleft left w_33">NEXT</div>
</div>