6

这是关于将 silverlight 应用程序转换为 html。将 XAML gui 转换为 HTML 的某些部分是相似的，但我想念 StackPanel 的易用性，其中元素可以轻松水平对齐。在 HTML 中执行此操作的最佳方法是什么？

我看过的各种方式：

  • 使用一张桌子。这样做会很笨拙。
  • CCS3 多列：可以工作，但也不像堆栈面板。

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

4

3 回答 3

8

您通常可以使用 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 会像您的堆栈面板一样对其进行布局。

于 2013-04-24T23:06:34.807 回答
1

您可以使用父 div 并在其中包含所有元素 have float: left，这将有效地将它们全部水平排列。

于 2013-04-24T23:06:48.913 回答
1

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

于 2020-05-07T14:35:50.503 回答