在HTML中模拟水平XAML StackPanel的最佳方法是什么？

Question

这是关于将一个silverlight应用程序转换为html的问题。 将 XAML gui 转换为 HTML 的某些部分是相似的，但我怀念 StackPanel 的易用性，因为在 StackPanel 中，元素可以轻松地水平排列。在HTML中，最好的方法是什么？

各种方法我都看过了。

• 用一个表格 这样做会笨拙很多。
• CCS3多列。可以，但也不像堆栈面板。

我对使用现代浏览器功能持开放态度（不一定要支持老的IE）。

Answer 1

你通常可以使用inline-block元素获得类似的效果......

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

使用以下CSS

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

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

您可以 在JSFiddle上看到这个工作.

这个例子很简单，比如你可以用百分比宽度来填充可用空间，这样会更好看。这里的要点是，如果你有一个要显示的东西的集合，无序列表给出了合理的语义，而且CSS的布局就像你的堆栈面板一样。

Answer 2

你可以使用一个父div，并让里面的所有元素都拥有 float: left，这将有效地将它们全部水平排列。

Answer 3

你可以使用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>