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.

Answer 2

You could use a parent div and have all elements inside have float: left, this would effectively all line them up horizontally.

Answer 3

You can use css flexbox.

.flex-container {
  display: flex;
  background-color: blue;
  height: 30px;
  flex-direction: row;
}

.flex-item {
  background-color: red;
  width: 50px;
  border: 1px solid black;
}

<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>