Is there an easy way to distribute inline elements within a parent block container using CSS? Setting margins to auto doesn’t work since the margins between inline elements are set to 0 and I don’t want to mess around with percentages as the content is dynamic.
In particular, I have several anchor elements (a) within a paragraph (p) that spans 80% of its container and I’m looking for an easy way to distribute them evenly within the paragraph.
EDIT (@cletus): The paragraph will not wrap and the anchors are the only thing in the paragraph. By distribute evenly, I mean that the space between the left (right) edge and first (last) element and the elements themselves is equidistant.
Hmmm, sounds to me like you’re creating a menu? You might want to use a list to hold your anchors and style the list accordingly. This is the commonly accepted best practice.
As for even distribution of elements, I was looking yesterday for something similar, I was hoping it would be in the CSS3 spec, but it’s not (at least I can’t find it) which seems like a major f*ckup if you ask me. Anyway…
Which leaves two options. CSS, and Javascript.
With CSS, use the margin-right property for each element. It’s a good idea to create a .last class that sets margin-right to zero which prevents your last element from breaking the layout.
There’s a bunch of javascripts out there that will do this for you. I prefer only to use JS when absolutely essential, so I couldn’t comment on which one is best.
… there is one last thing you could try, but… you didn’t hear this from me ok?
You could use a table. That is the quickest (and dirtiest) way to get what you want.
IMHO, and you probably don’t want to hear this, but the design is probably flawed. It’s common knowledge that distributing items evenly across a layout with CSS is a pain, so designers should avoid it.
UPDATE: You could also try
then use something like this
That might get you close.