title: CSS: Horizontal, comma-separated list with fixed <li> width
body: <p>I would like to achieve the following structure:</p>
  
  <pre><code>[gfhtfg..., kgjrfg..., asd,      mrhgf,   ]  
   ^-------^  ^-------^  ^-------^ ^-------^  
       X          X          X         X
  (X = a fixed length)
  </code></pre>
  
  <p>I've got a <code>&lt;div&gt;</code> with a fixed length, and inside it an horizontal, comma-separated list (<code>ul</code>) of links.<br>
  The <code>&lt;li&gt;</code> elements should have a fixed width, and so if the links exceed a fixed length an ellipsis will be shown (using the <code>text-overflow</code> property).</p>
  
  <p>I know two ways to make a list horizontal. One is using <code>display: inline</code> and the other using the <code>float</code> property.  </p>
  
  <ul>
  <li>With the first approach, I can't set a fixed width because the CSS specification doesn't allow setting the width of inline elements.</li>
  <li>The second approach creates a mess :O</li>
  <li>Setting <code>float</code> on the <code>&lt;a&gt;</code> element, intending to limit the width there, separates it from the commas.</li>
  </ul>
  
  <p><em>There are no browser-compatibility issues, I only have to support WebKit.</em></p>
  
  <p>I included the code I attempted to work with:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;title&gt;a title&lt;/title&gt;
   &lt;style&gt;
    body { font-family: arial; font-size: 10pt; }
  
    div {
     height: 30px;
     width: 300px;
     background: #eee;
     border: 1px solid #ccc;
     text-align: center;
    }
  
    ul { margin: 0px; padding: 0px; }
    ul li:after { content: ","; }
    ul li:last-child:after { content: ""; }
    ul li a { text-decoration: none; color: #666; }
  
    ul li {
     margin: 0px;
     padding: 0px;
     list-style: none;
     overflow: hidden;
     text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
     /* Inline elements can't have a width (and they shouldn't according to the specification */
     display: inline;
     width: 30px;
    }
   &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div&gt;
   &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;a certain link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;link&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;once again&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;another one&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you.</p>