Auto-arrange <li> elements into equal columns

Question

I have several values I'm rendering as <li> elements on my template and I want to further this by having them arranged into equal (or near-equal columns) automatically in the template. How can I achieve this?

So far I'm rendering all the values as

<ul>
   {% for feature in features %}
      <li>{{ feature }}</li>
   {% endfor %}
</ul>

Answer 1

What about styling each li with style="float:left; width: {% width %}px;"

All you have to do is calculate the width parameter... eg width = 1000/features.length;