Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>For Gecko-based browsers, I came up with this solution. This solution doesn't work with WebKit browsers, though (e.g. Chromium, Midori, Epiphany), they still show trailing space after the last item.</p> <p>I put the menu bar in a <em>justified paragraph</em>. Problem is that the last line of a justified paragraph won't be rendered justified, for obvious reasons. Therefore I add a wide invisible element (e.g. an img) which warrants that the paragraph is at least two lines long.</p> <p>Now the menu bar is justified by the same algorithm the browser uses for justifying plain text.</p> <p><strong>Code:</strong></p> <pre><code>&lt;div style="width:500px; background:#eee;"&gt; &lt;p style="text-align:justify"&gt; &lt;a href="#"&gt;THE&amp;nbsp;MENU&amp;nbsp;ITEMS&lt;/a&gt; &lt;a href="#"&gt;SHOULD&amp;nbsp;BE&lt;/a&gt; &lt;a href="#"&gt;JUSTIFIED&lt;/a&gt; &lt;a href="#"&gt;JUST&amp;nbsp;AS&lt;/a&gt; &lt;a href="#"&gt;PLAIN&amp;nbsp;TEXT&lt;/a&gt; &lt;a href="#"&gt;WOULD&amp;nbsp;BE&lt;/a&gt; &lt;img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/&gt; &lt;/p&gt; &lt;p&gt;There's an varying number of text-only menu items and the page layout is fluid.&lt;/p&gt; &lt;p&gt;The first menu item should be left-aligned, the last menu item should be right-aligned. The remaining items should be spread optimal on the menu bar.&lt;/p&gt; &lt;p&gt;The number is varying,so there's no chance to pre-calculate the optimal widths.&lt;/p&gt; &lt;p&gt;Note that a TABLE won't work here as well:&lt;/p&gt; &lt;ul&gt; &lt;li&gt;If you center all TDs, the first and the last item aren't aligned correctly.&lt;/li&gt; &lt;li&gt;If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Remark: Do you notice I cheated? To add the space filler element, I have to make some guess about the width of the menu bar. So this solution is not completely down to the rules.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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