What is the best way to emulate a horizontal XAML StackPanel in HTML?

Question

This is regarding converting a silverlight app to html. Some parts of converting a XAML gui to HTML are similar, but I miss the ease of use of a StackPanel where elements can be easily horizontally aligned. What the best way to do this in HTML?

Various ways I've looked at:

• Using a table. Would be a lot clunkier to do this way.
• CCS3 multi-column: Could work but also is not really like a stack panel.

I'm open for using modern browser capabilities (does not have to support old IE's).

Answer 1

You can usually get a similar effect using inline-block elements...

<ul class="horizontal">
     <li>A</li>
     <li>B</li>
     <li>C</li>
</ul>

With the following CSS

.horizontal {
    margin: 0;
    padding: 0;
}

.horizontal li {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

You can see this working on JSFiddle.

The example is simplistic, you could use percentage-widths to fill the available space, for example, which would look better. The main point here is that if you have a collection of things to show, the unordered list gives reasonable semantics and the CSS lays it out like your stack panel.