snipt

Ctrl+h for KB shortcuts

Text only

Multiple column lists using one <ul>

<ul id="double">
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>


<style>
	ul{
      width:760px;
      margin-bottom:20px;
      overflow:hidden;
      border-top:1px solid #ccc;
    }
    li{
      line-height:1.5em;
      border-bottom:1px solid #ccc;
      float:left;
      display:inline;
    }
    #double li  { width:50%;} <span class="code-comment">/* 2 col */</span>
    #triple li  { width:33.333%; } <span class="code-comment">/* 3 col */</span>
    #quad li    { width:25%; } <span class="code-comment">/* 4 col */</span>
    #six li     { width:16.666%; } <span class="code-comment">/* 6 col */</span>
</style>
https://snipt.net/embed/35dfbd8fa06edb77b788b541c29efff4/
/raw/35dfbd8fa06edb77b788b541c29efff4/
35dfbd8fa06edb77b788b541c29efff4
text
Text only
35
2019-07-16T04:21:47
True
False
False
Mar 06, 2013 at 08:02 AM
/api/public/snipt/57109/
multiple-column-lists-using-one-ul
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a> <a href="#L-15">15</a> <a href="#L-16">16</a> <a href="#L-17">17</a> <a href="#L-18">18</a> <a href="#L-19">19</a> <a href="#L-20">20</a> <a href="#L-21">21</a> <a href="#L-22">22</a> <a href="#L-23">23</a> <a href="#L-24">24</a> <a href="#L-25">25</a> <a href="#L-26">26</a> <a href="#L-27">27</a> <a href="#L-28">28</a> <a href="#L-29">29</a> <a href="#L-30">30</a> <a href="#L-31">31</a> <a href="#L-32">32</a> <a href="#L-33">33</a> <a href="#L-34">34</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a>&lt;ul id=&quot;double&quot;&gt; </span><span id="L-2"><a name="L-2"></a> &lt;li&gt;CSS&lt;/li&gt; </span><span id="L-3"><a name="L-3"></a> &lt;li&gt;XHTML&lt;/li&gt; </span><span id="L-4"><a name="L-4"></a> &lt;li&gt;Semantics&lt;/li&gt; </span><span id="L-5"><a name="L-5"></a> &lt;li&gt;Accessibility&lt;/li&gt; </span><span id="L-6"><a name="L-6"></a> &lt;li&gt;Usability&lt;/li&gt; </span><span id="L-7"><a name="L-7"></a> &lt;li&gt;Web Standards&lt;/li&gt; </span><span id="L-8"><a name="L-8"></a> &lt;li&gt;PHP&lt;/li&gt; </span><span id="L-9"><a name="L-9"></a> &lt;li&gt;Typography&lt;/li&gt; </span><span id="L-10"><a name="L-10"></a> &lt;li&gt;Grids&lt;/li&gt; </span><span id="L-11"><a name="L-11"></a> &lt;li&gt;CSS3&lt;/li&gt; </span><span id="L-12"><a name="L-12"></a> &lt;li&gt;HTML5&lt;/li&gt; </span><span id="L-13"><a name="L-13"></a> &lt;li&gt;UI&lt;/li&gt; </span><span id="L-14"><a name="L-14"></a>&lt;/ul&gt; </span><span id="L-15"><a name="L-15"></a> </span><span id="L-16"><a name="L-16"></a> </span><span id="L-17"><a name="L-17"></a>&lt;style&gt; </span><span id="L-18"><a name="L-18"></a> ul{ </span><span id="L-19"><a name="L-19"></a> width:760px; </span><span id="L-20"><a name="L-20"></a> margin-bottom:20px; </span><span id="L-21"><a name="L-21"></a> overflow:hidden; </span><span id="L-22"><a name="L-22"></a> border-top:1px solid #ccc; </span><span id="L-23"><a name="L-23"></a> } </span><span id="L-24"><a name="L-24"></a> li{ </span><span id="L-25"><a name="L-25"></a> line-height:1.5em; </span><span id="L-26"><a name="L-26"></a> border-bottom:1px solid #ccc; </span><span id="L-27"><a name="L-27"></a> float:left; </span><span id="L-28"><a name="L-28"></a> display:inline; </span><span id="L-29"><a name="L-29"></a> } </span><span id="L-30"><a name="L-30"></a> #double li { width:50%;} &lt;span class=&quot;code-comment&quot;&gt;/* 2 col */&lt;/span&gt; </span><span id="L-31"><a name="L-31"></a> #triple li { width:33.333%; } &lt;span class=&quot;code-comment&quot;&gt;/* 3 col */&lt;/span&gt; </span><span id="L-32"><a name="L-32"></a> #quad li { width:25%; } &lt;span class=&quot;code-comment&quot;&gt;/* 4 col */&lt;/span&gt; </span><span id="L-33"><a name="L-33"></a> #six li { width:16.666%; } &lt;span class=&quot;code-comment&quot;&gt;/* 6 col */&lt;/span&gt; </span><span id="L-34"><a name="L-34"></a>&lt;/style&gt; </span></pre></div> </td></tr></table>
column, css, html, li, list, ul