<p>You find plenty of tutorials on menu bars in HTML, but for this specific (though IMHO generic) case, I haven't found any decent solution:</p>

<pre><code>#  THE MENU ITEMS    SHOULD BE    JUSTIFIED     JUST AS    PLAIN TEXT     WOULD BE  #
#  ^                                                                             ^  #
</code></pre>

<ul>
<li>There's an varying number of text-only menu items and the page layout is fluid.</li>
<li>The first menu item should be left-aligned, the last menu item should be right-aligned.</li>
<li>The remaining items should be spread optimally on the menu bar.</li>
<li>The number is varying,so there's no chance to pre-calculate the optimal widths.</li>
</ul>

<p>Note that a TABLE won't work here as well:</p>

<ul>
<li>If you center all TDs, the first and the last item aren’t aligned correctly.</li>
<li>If you left-align and right-align the first resp. the last items, the spacing will be sub-optimal.</li>
</ul>

<p>Isn’t it strange that there is no obvious way to implement this in a clean way by using HTML and CSS?</p>

[{'answer_id': 49538, 'author': 'Jordi Bunster', 'author_id': 4272, 'author_profile': 'https://Stackoverflow.com/users/4272', 'pm_score': 2, 'selected': False, 'text': '<p>Make it a <code>&lt;p&gt;</code> with <code>text-align: justify</code> ?</p>\n\n<p><strong>Update</strong>: Nevermind. That doesn\'t work at all as I\'d thought.</p>\n\n<p><strong>Update 2</strong>: Doesn\'t work in any browsers other than IE right now, but CSS3 has support for this in the form of <a href="http://www.w3.org/TR/css3-text/#text-align-last" rel="nofollow noreferrer"><code>text-align-last</code></a></p>\n'}, {'answer_id': 49558, 'author': 'flight', 'author_id': 3377, 'author_profile': 'https://Stackoverflow.com/users/3377', 'pm_score': 1, 'selected': False, 'text': '<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>\n\n<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>\n\n<p>Now the menu bar is justified by the same algorithm the browser uses for justifying plain text.</p>\n\n<p><strong>Code:</strong></p>\n\n<pre><code>&lt;div style="width:500px; background:#eee;"&gt;\n &lt;p style="text-align:justify"&gt;\n  &lt;a href="#"&gt;THE&amp;nbsp;MENU&amp;nbsp;ITEMS&lt;/a&gt;\n  &lt;a href="#"&gt;SHOULD&amp;nbsp;BE&lt;/a&gt;\n  &lt;a href="#"&gt;JUSTIFIED&lt;/a&gt;\n  &lt;a href="#"&gt;JUST&amp;nbsp;AS&lt;/a&gt;\n  &lt;a href="#"&gt;PLAIN&amp;nbsp;TEXT&lt;/a&gt;\n  &lt;a href="#"&gt;WOULD&amp;nbsp;BE&lt;/a&gt;\n  &lt;img src="/Content/Img/stackoverflow-logo-250.png" width="400" height="0"/&gt;\n &lt;/p&gt;\n &lt;p&gt;There\'s an varying number of text-only menu items and the page layout is fluid.&lt;/p&gt;\n &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;\n &lt;p&gt;The number is varying,so there\'s no chance to pre-calculate the optimal widths.&lt;/p&gt;\n &lt;p&gt;Note that a TABLE won\'t work here as well:&lt;/p&gt;\n &lt;ul&gt;\n  &lt;li&gt;If you center all TDs, the first and the last item aren\'t aligned correctly.&lt;/li&gt;\n  &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;\n &lt;/ul&gt;\n&lt;/div&gt;\n</code></pre>\n\n<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>\n'}, {'answer_id': 49659, 'author': 'David Heggie', 'author_id': 4309, 'author_profile': 'https://Stackoverflow.com/users/4309', 'pm_score': -1, 'selected': False, 'text': '<p>I know the original question specified HTML + CSS, but it didn\'t specifically say <em>no javascript</em> ;)</p>\n\n<p>Trying to keep the css and markup as clean as possible, and as semantically meaningful as possible to (using a UL for the menu) I came up with this suggestion. Probably not ideal, but it may be a good starting point:</p>\n\n<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;\n\n&lt;html&gt;\n\n    &lt;head&gt;\n        &lt;title&gt;Kind-of-justified horizontal menu&lt;/title&gt;\n\n        &lt;style type="text/css"&gt;\n        ul {\n            list-style: none;\n            margin: 0;\n            padding: 0;\n            width: 100%;\n        }\n\n        ul li {\n            display: block;\n            float: left;\n            text-align: center;\n        }\n        &lt;/style&gt;\n\n        &lt;script type="text/javascript"&gt;\n            setMenu = function() {\n                var items = document.getElementById("nav").getElementsByTagName("li");\n                var newwidth = 100 / items.length;\n\n                for(var i = 0; i &lt; items.length; i++) {\n                    items[i].style.width = newwidth + "%";\n                }\n            }\n        &lt;/script&gt;\n\n    &lt;/head&gt;\n\n    &lt;body&gt;\n\n        &lt;ul id="nav"&gt;\n            &lt;li&gt;&lt;a href="#"&gt;first item&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;\n        &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href="#"&gt;last item&lt;/a&gt;&lt;/li&gt;\n        &lt;/ul&gt;\n\n        &lt;script type="text/javascript"&gt;\n            setMenu();\n        &lt;/script&gt;\n\n    &lt;/body&gt;\n\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 2444135, 'author': 'Asbjørn Ulsberg', 'author_id': 61818, 'author_profile': 'https://Stackoverflow.com/users/61818', 'pm_score': 6, 'selected': False, 'text': '<p>The simplest thing to do is to is to force the line to break by inserting an element at the end of the line that will occupy more than the left available space and then hiding it. I\'ve accomplished this quite easily with a simple <code>span</code> element like so:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>#menu {\r\n  text-align: justify;\r\n}\r\n\r\n#menu * {\r\n  display: inline;\r\n}\r\n\r\n#menu li {\r\n  display: inline-block;\r\n}\r\n\r\n#menu span {\r\n  display: inline-block;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 0;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;\r\n  &lt;ul&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 1&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 3&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 2&lt;/a&gt;&lt;/li&gt;\r\n  &lt;/ul&gt;\r\n  &lt;span&gt;&lt;/span&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>All the junk inside the <code>#menu span</code> selector is (as far as I\'ve found) required to please most browsers. It should force the width of the <code>span</code> element to 100%, which should cause a line break since it is considered an inline element due to the <code>display: inline-block</code> rule. <code>inline-block</code> also makes the <code>span</code> possible to block-level style rules like <code>width</code> which causes the element to not fit in line with the menu and thus the menu to line-break.</p>\n\n<p>You of course need to adjust the width of the <code>span</code> to your use case and design, but I hope you get the general idea and can adapt it.</p>\n'}, {'answer_id': 2459113, 'author': 'mikelikespie', 'author_id': 64941, 'author_profile': 'https://Stackoverflow.com/users/64941', 'pm_score': 3, 'selected': False, 'text': '<p>Got a solution. Works in FF, IE6, IE7, Webkit, etc.</p>\n\n<p>Make sure you don\'t put any whitespace before closing the <code>span.inner</code>. IE6 will break.</p>\n\n<p>You can optionally give <code>.outer</code> a width</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>.outer {\r\n  text-align: justify;\r\n}\r\n.outer span.finish {\r\n  display: inline-block;\r\n  width: 100%;\r\n}\r\n.outer span.inner {\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;\r\n  &lt;span class="inner"&gt;THE MENU ITEMS&lt;/span&gt;\r\n  &lt;span class="inner"&gt;SHOULD BE&lt;/span&gt;\r\n  &lt;span class="inner"&gt;JUSTIFIED&lt;/span&gt;\r\n  &lt;span class="inner"&gt;JUST AS&lt;/span&gt;\r\n  &lt;span class="inner"&gt;PLAIN TEXT&lt;/span&gt;\r\n  &lt;span class="inner"&gt;WOULD BE&lt;/span&gt;\r\n  &lt;span class="finish"&gt;&lt;/span&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 3581939, 'author': 'Raksmey', 'author_id': 432634, 'author_profile': 'https://Stackoverflow.com/users/432634', 'pm_score': 0, 'selected': False, 'text': '<p>if to go with javascript that is possible (this script is base on mootools)</p>\n\n<pre><code>&lt;script type="text/javascript"&gt;//&lt;![CDATA[\n    window.addEvent(\'load\', function(){\n        var mncontainer = $(\'main-menu\');\n        var mncw = mncontainer.getSize().size.x;\n        var mnul = mncontainer.getFirst();//UL\n        var mnuw = mnul.getSize().size.x;\n        var wdif = mncw - mnuw;\n        var list = mnul.getChildren(); //get all list items\n        //get the remained width (which can be positive or negative)\n        //and devided by number of list item and also take out the precision\n        var liwd = Math.floor(wdif/list.length);\n        var selw, mwd=mncw, tliw=0;\n        list.each(function(el){\n            var elw = el.getSize().size.x;\n            if(elw &lt; mwd){ mwd = elw; selw = el;}\n            el.setStyle(\'width\', elw+liwd);\n            tliw += el.getSize().size.x;\n        });\n        var rwidth = mncw-tliw;//get the remain width and set it to item which has smallest width\n        if(rwidth&gt;0){\n            elw = selw.getSize().size.x;\n            selw.setStyle(\'width\', elw+rwidth);\n        }\n    });\n    //]]&gt;\n&lt;/script&gt;\n</code></pre>\n\n<p>and the css</p>\n\n<pre><code>&lt;style type="text/css"&gt;\n    #main-menu{\n        padding-top:41px;\n        width:100%;\n        overflow:hidden;\n        position:relative;\n    }\n    ul.menu_tab{\n        padding-top:1px;\n        height:38px;\n        clear:left;\n        float:left;\n        list-style:none;\n        margin:0;\n        padding:0;\n        position:relative;\n        left:50%;\n        text-align:center;\n    }\n    ul.menu_tab li{\n        display:block;\n        float:left;\n        list-style:none;\n        margin:0;\n        padding:0;\n        position:relative;\n        right:50%;\n    }\n    ul.menu_tab li.item7{\n        margin-right:0;\n    }\n    ul.menu_tab li a, ul.menu_tab li a:visited{\n        display:block;\n        color:#006A71;\n        font-weight:700;\n        text-decoration:none;\n        padding:0 0 0 10px;\n    }\n    ul.menu_tab li a span{\n        display:block;\n        padding:12px 10px 8px 0;\n    }\n    ul.menu_tab li.active a, ul.menu_tab li a:hover{\n        background:url("../images/bg-menutab.gif") repeat-x left top;\n        color:#999999;\n    }\n    ul.menu_tab li.active a span,ul.menu_tab li.active a.visited span, ul.menu_tab li a:hover span{\n        background:url("../images/bg-menutab.gif") repeat-x right top;\n        color:#999999;\n    }\n&lt;/style&gt;\n</code></pre>\n\n<p>and the last html</p>\n\n<pre><code>&lt;div id="main-menu"&gt;\n    &lt;ul class="menu_tab"&gt;\n        &lt;li class="item1"&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item2"&gt;&lt;a href="#"&gt;&lt;span&gt;The Project&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item3"&gt;&lt;a href="#"&gt;&lt;span&gt;About Grants&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item4"&gt;&lt;a href="#"&gt;&lt;span&gt;Partners&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item5"&gt;&lt;a href="#"&gt;&lt;span&gt;Resources&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item6"&gt;&lt;a href="#"&gt;&lt;span&gt;News&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;li class="item7"&gt;&lt;a href="#"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;\n    &lt;/ul&gt;\n&lt;/div&gt;\n</code></pre>\n'}, {'answer_id': 6789387, 'author': 'Diaren W', 'author_id': 437887, 'author_profile': 'https://Stackoverflow.com/users/437887', 'pm_score': 1, 'selected': False, 'text': '<p>Text is only justified if the sentence naturally causes a line break. So all you need to do is naturally force a line break, and hide whats on the second line:</p>\n\n<p>CSS:</p>\n\n<pre><code>ul {\n  text-align: justify;\n  width: 400px;\n  margin: 0;\n  padding: 0;\n  height: 1.2em;\n  /* forces the height of the ul to one line */\n  overflow: hidden;\n  /* enforces the single line height */\n  list-style-type: none;\n  background-color: yellow;\n}\n\nul li {\n  display: inline;\n}\n\nul li.break {\n  margin-left: 100%;\n  /* use e.g. 1000px if your ul has no width */\n}\n</code></pre>\n\n<p>HTML:</p>\n\n<pre><code>&lt;ul&gt;\n  &lt;li&gt;&lt;a href="/"&gt;The&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href="/"&gt;quick&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href="/"&gt;brown&lt;/a&gt;&lt;/li&gt;\n  &lt;li&gt;&lt;a href="/"&gt;fox&lt;/a&gt;&lt;/li&gt;\n  &lt;li class="break"&gt;&amp;nbsp;&lt;/li&gt;\n&lt;/ul&gt;\n</code></pre>\n\n<p>The li.break element must be on the same line as the last menu item and must contain some content (in this case a non breaking space), otherwise in some browsers, if it\'s not on the same line then you\'ll see some small extra space on the end of your line, and if it contains no content then it\'s ignored and the line is not justified.</p>\n\n<p>Tested in IE7, IE8, IE9, Chrome, Firefox 4.</p>\n'}, {'answer_id': 7117171, 'author': 'Jason Paul', 'author_id': 788575, 'author_profile': 'https://Stackoverflow.com/users/788575', 'pm_score': -1, 'selected': False, 'text': '<p>This can be achieved perfectly by some careful measurements and the last-child selector.</p>\n\n<pre><code>ul li {\nmargin-right:20px;\n}\nul li:last-child {\nmargin-right:0;\n}\n</code></pre>\n'}, {'answer_id': 9559900, 'author': 'remitbri', 'author_id': 1183664, 'author_profile': 'https://Stackoverflow.com/users/1183664', 'pm_score': 4, 'selected': False, 'text': '<p>Ok, this solution doesn\'t work on IE6/7, because of the lack of support of <code>:before</code>/<code>:after</code>, but:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {\r\n  text-align: justify;\r\n  list-style: none;\r\n  list-style-image: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\nul:after {\r\n  content: "";\r\n  margin-left: 100%;\r\n}\r\nli {\r\n  display: inline;\r\n}\r\na {\r\n  display: inline-block;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu"&gt;\r\n  &lt;ul&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 1&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 2&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 3&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 4&lt;/a&gt;&lt;/li&gt;\r\n    &lt;li&gt;&lt;a href="#"&gt;Menu item 5&lt;/a&gt;&lt;/li&gt;\r\n  &lt;/ul&gt;\r\n&lt;/div&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<p>The reason why I have the a tag as an <code>inline-block</code> is because I don\'t want the words inside to be justified as well, and I don\'t want to use non-breaking spaces either.</p>\n'}, {'answer_id': 10651987, 'author': 'Litek', 'author_id': 650157, 'author_profile': 'https://Stackoverflow.com/users/650157', 'pm_score': 0, 'selected': False, 'text': '<p>Simpler markup, tested in Opera, FF, Chrome, IE7, IE8:</p>\n\n<pre><code>&lt;div class="nav"&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item1&lt;/a&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item2&lt;/a&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item3&lt;/a&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item4&lt;/a&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item5&lt;/a&gt;\n  &lt;a href="#" class="nav_item"&gt;nav item6&lt;/a&gt;\n  &lt;span class="empty"&gt;&lt;/span&gt;\n&lt;/div&gt;\n</code></pre>\n\n<p>and css:</p>\n\n<pre><code>.nav {\n  width: 500px;\n  height: 1em;\n  line-height: 1em;\n  text-align: justify;\n  overflow: hidden;\n  border: 1px dotted gray;\n}\n.nav_item {\n  display: inline-block;\n}\n.empty {\n  display: inline-block;\n  width: 100%;\n  height: 0;\n}\n</code></pre>\n\n<p><a href="http://codepen.io/full/358/3" rel="nofollow">Live example</a>.</p>\n'}, {'answer_id': 11687443, 'author': 'Rafał Rowiński', 'author_id': 809351, 'author_profile': 'https://Stackoverflow.com/users/809351', 'pm_score': 2, 'selected': False, 'text': '<p>Works with Opera , Firefox, Chrome and IE</p>\n\n<pre><code>ul {\n   display: table;\n   margin: 1em auto 0;\n   padding: 0;\n   text-align: center;\n   width: 90%;\n}\n\nli {\n   display: table-cell;\n   border: 1px solid black;\n   padding: 0 5px;\n}\n</code></pre>\n'}, {'answer_id': 19469993, 'author': 'bash2day', 'author_id': 2633611, 'author_profile': 'https://Stackoverflow.com/users/2633611', 'pm_score': 2, 'selected': False, 'text': '<p>yet another solution. I had no option to tackle the html like adding distinguished class etc., so I found a pure css way.</p>\n\n<p>Works in Chrome, Firefox, Safari..don\'t know about IE.</p>\n\n<p>Test: <a href="http://jsfiddle.net/c2crP/1" rel="nofollow noreferrer">http://jsfiddle.net/c2crP/1</a></p>\n\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {\r\n  margin: 0; \r\n  padding: 0; \r\n  list-style: none; \r\n  width: 200px; \r\n  text-align: justify; \r\n  list-style-type: none;\r\n}\r\nul &gt; li {\r\n  display: inline; \r\n  text-align: justify; \r\n}\r\n\r\n/* declaration below will add a whitespace after every li. This is for one line codes where no whitespace (of breaks) are present and the browser wouldn\'t know where to make a break. */\r\nul &gt; li:after {\r\n  content: \' \'; \r\n  display: inline;\r\n}\r\n\r\n/* notice the \'inline-block\'! Otherwise won\'t work for webkit which puts after pseudo el inside of it\'s parent instead of after thus shifting also the parent on next line! */\r\nul &gt; li:last-child:after {\r\n  display: inline-block;\r\n  margin-left: 100%; \r\n  content: \' \';\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;\r\n  &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;\r\n  &lt;li&gt;&lt;a href="#"&gt;exposities&lt;/a&gt;&lt;/li&gt;\r\n  &lt;li&gt;&lt;a href="#"&gt;werk&lt;/a&gt;&lt;/li&gt;\r\n  &lt;li&gt;&lt;a href="#"&gt;statement&lt;/a&gt;&lt;/li&gt;\r\n  &lt;li&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;\r\n&lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 29188477, 'author': 'Josh Crozier', 'author_id': 2680216, 'author_profile': 'https://Stackoverflow.com/users/2680216', 'pm_score': 6, 'selected': True, 'text': '<h3>Modern Approach - <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">Flexboxes</a>!</h3>\n\n<p>Now that <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes">CSS3 flexboxes</a> have <a href="http://caniuse.com/#feat=flexbox">better browser support</a>, some of us can finally start using them. Just add additional vendor prefixes for <a href="http://caniuse.com/#feat=flexbox">more browser coverage</a>.</p>\n\n<p>In this instance, you would just set the parent element\'s <code>display</code> to <code>flex</code> and then change the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"><code>justify-content</code> property</a> to either <a href="http://jsfiddle.net/vomckkpc/"><code>space-between</code></a> or <a href="http://jsfiddle.net/putpyo16/"><code>space-around</code></a> in order to add space between or around the children flexbox items.</p>\n\n<p><strong>Using <code>justify-content: space-between</code></strong> - <a href="http://jsfiddle.net/vomckkpc/">(<strong>example here)</strong></a>:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n.menu {\r\n    display: flex;\r\n    justify-content: space-between;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;\r\n    &lt;li&gt;Item One&lt;/li&gt;\r\n    &lt;li&gt;Item Two&lt;/li&gt;\r\n    &lt;li&gt;Item Three Longer&lt;/li&gt;\r\n    &lt;li&gt;Item Four&lt;/li&gt;\r\n&lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n\n<hr>\n\n<p><strong>Using <code>justify-content: space-around</code></strong> - <a href="http://jsfiddle.net/putpyo16/"><strong>(example here)</strong></a>:</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n.menu {\r\n    display: flex;\r\n    justify-content: space-around;\r\n}</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="menu"&gt;\r\n    &lt;li&gt;Item One&lt;/li&gt;\r\n    &lt;li&gt;Item Two&lt;/li&gt;\r\n    &lt;li&gt;Item Three Longer&lt;/li&gt;\r\n    &lt;li&gt;Item Four&lt;/li&gt;\r\n&lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 72763328, 'author': 'Amir ', 'author_id': 19136274, 'author_profile': 'https://Stackoverflow.com/users/19136274', 'pm_score': 0, 'selected': False, 'text': '<p>try this</p>\n<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-css lang-css prettyprint-override"><code>*{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    ul {\n        list-style: none;\n        display: flex;\n        align-items: center;\n        justify-content: space-evenly;\n    }</code></pre>\r\n<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;ul&gt;\n        &lt;li&gt;List item One&lt;/li&gt;\n        &lt;li&gt;List item Two&lt;/li&gt;\n        &lt;li&gt;List item Three &lt;/li&gt;\n        &lt;li&gt;List item Four&lt;/li&gt;\n    &lt;/ul&gt;</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}]
['https://Stackoverflow.com/questions/49536', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3377/']