Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>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.</p> <p>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...</p> <p>Which leaves two options. CSS, and Javascript. </p> <p>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. </p> <p>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.</p> <p>... there is one last thing you could try, but... you didn't hear this from me ok?</p> <p>You could use a table. That is the quickest (and dirtiest) way to get what you want.</p> <p>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.</p> <p>UPDATE: You could also try </p> <pre><code>.link_container { text-align: center; } .link_container a { margin-right: 10x; } .last { margin-right: 0; } </code></pre> <p>then use something like this</p> <pre><code>&lt;div class='link-container'&gt; &lt;a href='...'&gt;Some line&lt;/a&gt; &lt;a href='...'&gt;Some line&lt;/a&gt; &lt;a href='...'&gt;Some line&lt;/a&gt; &lt;a class='last' href='...'&gt;Some line&lt;/a&gt; &lt;/div&gt; </code></pre> <p>That might get you close.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload