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

Question

这是关于将Silverlight应用程序转换为html。将XAML gui转换为HTML的某些部分是相似的，但是我错过了StackPanel的易用性，因为在其中可以轻松地水平对齐元素。用HTML做到这一点的最佳方法是什么？

我看过的各种方法：

• 使用表格。用这种方式会很笨拙。
• CCS3多列：可以工作，但实际上并不像堆栈面板。

我愿意使用现代浏览器功能（不必支持旧版IE）。

Answer 1

通常，您可以使用内联块元素获得类似的效果...

<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会像堆栈面板一样对其进行布局。