Question

How can I evenly space (ie. fully justify) words to fill a line except when in multi-word phrases (like ‘human rights’) to create an effect like the below?

Answer 1

you should use an html list for a nav menu:

tutorial here but many other if you google them:
http://jamesowers.co.uk/css-tutorials/50/horizontal-css-list-menu/

reasons behind it:

• your menu will look good if css does not load / not supported
• helps accessibility
• semantically, you are displaying a list of items – so what’s better than a list to display them?

EDIT

the easiest, html/css only, solution is to use a table, however my eyes burn at the sight of a table used for layout. (Depending on the browser support you want to offer, you may get away with ul li or nested div tags and css display:table-cell/table-row etc)

fiddle here: http://jsfiddle.net/nTM3S/

    <table cellpadding="3" class="myTable" style="text-align:center">
        <tr>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>
           <td>Politics</td>
           <td>Environment</td>
           <td>Economics</td>
           <td>Culture</td>
           <td>Human Rights</td>

        </tr>
    </table>

and css:

td {
    width: 1%;
    padding: 20px;
    white-space: nowrap;
    background-color: #ccc;
    color: #900;
}