title: Unable to size the list element
body: <p>I'm trying to add a custom <code>width</code> and <code>height</code> to the list element but unable to do so.</p>
  
  <p><strong>HTML :</strong> </p>
  
  <pre><code>&lt;div class="myclass"&gt;
      &lt;ul&gt;
          &lt;li style="background-color:green;"&gt;&lt;span class="myspanclass"&gt;0&lt;/span&gt;&lt;/li&gt;
          &lt;li class="liclass" style="background-color:green;"&gt;0&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Style :</strong> </p>
  
  <p>Below works : </p>
  
  <pre><code>.myclass ul {list-style-type:none; padding: 0px;}
  .myclass li {display: inline; margin-right: 10px;}
  </code></pre>
  
  <p>None of the below works : </p>
  
  <pre><code>.myclass ul li {width:50px; height:50px;}
  .myclass li {width:50px; height:50px;}
  .liclass {width:50px; height:50px;}
  .myspanclass {width:50px; height:50px;}
  </code></pre>
  
  <p>What am I doing wrong? The <code>li</code> has a background color green and it should appear as a <code>50x50</code> box as defined in the css style. But its not working.</p>