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;
}

你可以see this working on JSFiddle。

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

Answer 2

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

Answer 3

您可以使用父div，并且内部的所有元素都有float: left，这实际上会将它们全部水平排列。

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

3 个答案: