CODEWITHSUNDEEP
htmlcss
Johannes
Johannes

Reputation: 6429

inline margins on pagination

I'm trying to create a pagination navigation element from a list of links. The page numbers should be center aligned and the prev/next buttons float to the left and right edge of the parent element respectively.

However I can't quite get the elements to behave right.

When I set the list elements to display:inline the page numbers don't align due to vertical margins not being calculated on inline elements: enter image description here http://jsfiddle.net/PftgP/

And when using display:inline-block instead, the page number margins work, but the prev/next buttons no longer float enter image description here http://jsfiddle.net/LDzgK/1/

Without resorting to crazy position:relative hacks or changing the html, is there an easy way I can get both the page numbers to stay vertically aligned, and the prev/next buttons to float correctly? I'm sure I'm missing an easy fix.

Upvotes: 0

Views: 153

Answers (1)

Roy Sonasish
Roy Sonasish

Reputation: 4599

use display:inline-block in to the anchor in your first fiddle file

jfFiddle File

Upvotes: 1

Related Questions