Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to set auto padding to correspond div's width
    primarykey
    data
    text
    <blockquote> <p><strong>Possible Duplicate:</strong><br> <a href="https://stackoverflow.com/questions/7647195/evenly-spaced-list-items">Evenly spaced list items</a> </p> </blockquote> <p>I want to make an auto padding to correspond my div's width.</p> <p>Here's how it looks like now:</p> <pre><code>|-------------------------------------------------------------------------------| | mytext1 mytext2 mytext3 mytext4 mytext5 | |-------------------------------------------------------------------------------| </code></pre> <p>Here's how I want it to looks like:</p> <pre><code>|-------------------------------------------------------------------------------| |mytext1 mytext2 mytext3 mytext4 mytext5| |-------------------------------------------------------------------------------| </code></pre> <p><br /> <hr /> <br /></p> <p>Here's my code:</p> <p><em>HTML</em>:</p> <pre class="lang-html prettyprint-override"><code>&lt;div id="header-1"&gt; &lt;div id="header-2"&gt; &lt;ul&gt; &lt;li&gt;mytext1&lt;/li&gt; &lt;li&gt;mytext2&lt;/li&gt; &lt;li&gt;mytext3&lt;/li&gt; &lt;li&gt;mytext4&lt;/li&gt; &lt;li&gt;mytext2&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><em>CSS</em>:</p> <pre class="lang-css prettyprint-override"><code>#header-1 { width: 100%; height: 33px; } #header-2 ul { max-width: 960px; margin: auto; text-align: center; padding-right: 30px; padding-top: 7.5px; } #header-2 li { list-style-type: none; display: inline; } </code></pre> <p><a href="http://fiddle.jshell.net/DcDcx/show/" rel="nofollow noreferrer"><h2>Fiddle</h2></a></p> <p><strong>NOTE</strong>: I don't want to use table.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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