在HTML中模擬水平XAML StackPanel的最佳方式是什麼？

這是關於將silverlight應用程序轉換爲html的。將XAML gui轉換爲HTML的某些部分是相似的，但我錯過了使用StackPanel的便利性，其中元素可以輕鬆水平對齊。在HTML中執行此操作的最佳方法是什麼？在HTML中模擬水平XAML StackPanel的最佳方式是什麼？

各種方法我已經看了：

使用表。這樣做會很笨重。
CCS3多列：可以工作，但也不是真的像堆棧面板。

我打開使用現代瀏覽器功能（不必支持舊IE瀏覽器）。

來源

2013-04-24 John5000

fyi，只是在您的問題中添加了silverlight標籤，以便具有StackPanel經驗的用戶可以更容易地看到問題。 – keithwyland 2013-04-24 23:07:35

您通常可以使用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; 
}

你可以see this working on JSFiddle。

該示例很簡單，您可以使用百分比寬度填充可用空間，例如，看起來更好。這裏的主要觀點是，如果你有一些東西要顯示，那麼無序列表就會給出合理的語義，而CSS就像你的堆棧面板一樣。

來源

2013-04-24 23:06:34 Fenton

不錯。很棒。不知道你能做到這一點。 – John5000 2013-04-25 00:15:54

@Steve，如何讓它垂直？我希望它是面向列的，而不是面向行的。 – Shimmy 2015-04-02 06:59:33

默認情況下@Shimmy列表是垂直的（單列）。您可以使用'column-count'獲取CSS中的列布局，例如'column-count：3;' – Fenton 2015-04-02 07:45:56

你可以使用一個父div並且裏面的所有元素都有float: left，這將有效地將它們水平排列。

來源

2013-04-24 23:06:48 Kenneth

在HTML中模擬水平XAML StackPanel的最佳方式是什麼？

回答

相關問題