Databases
StackOverflow2013
Postsdbo
POalign a horizontals menu li items
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POalign a horizontals menu li items
    text
    copied!<p>I am having real troubles with trying to align a horizontal menu.So far my menu is looking like <img src="https://i.stack.imgur.com/Dqc81.png" alt="enter image description here"> </p> <p>I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu</p> <p>I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?</p> <p>My html </p> <pre><code> &lt;nav class="slide-nav"&gt; &lt;ul class="slider"&gt; &lt;li class="selected"&gt; &lt;div&gt; &lt;span class="heart"&gt;&lt;/span&gt; &lt;div&gt; Get Started&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;span class="price-tag"&gt;&lt;/span&gt; &lt;div&gt; Get Results&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;span class="star"&gt;&lt;/span&gt; &lt;div&gt; Track &amp; Engage&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li&gt; &lt;div&gt; &lt;span class="people"&gt;&lt;/span&gt; &lt;div&gt; Features&lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; </code></pre> <p>css</p> <pre><code>.slide-nav { border-bottom: solid 1px #f2f2f2; margin: 0 auto; width: 856px; } .slider { list-style: none; height: 38px; margin: 0 auto; width: 722px; } .slider li { border-bottom: solid 7px transparent; cursor: pointer; display: inline-block; width: 150px; } .slider li div { line-height: 31px; } .slider li div div { text-indent: 6px; } .slider li.selected &gt; div { border-bottom: solid 7px #592970; } </code></pre>
 

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