如何水平显示带有元素的列表答案

【问题标题】：how to display list with elements horizontally如何水平显示带有元素的列表
【发布时间】：2013-02-23 18:45:05
【问题描述】：

我正在尝试水平显示组，每个组都列出了属于该组的成员。例如：

   Group 1:           Group 2:       Group 3:
   1. Joe Blo         1. Bob         1. etc..
   2. Joe smith       2. Billybob
   3. Joe glow        3. Bobby

我不是 css 的粉丝，我不确定我在这里做错了什么：

<ul id="grpId">
@foreach (var item in Model)
{                  
    <li>           
        Group @Html.DisplayName(item.GroupId.ToString())<br />
        <ol>
            @foreach (var student in item.GroupMembers)
            {
                <li>@String.Format("{0} {1}", student.FirstName, student.LastName)</li>
            }
        </ol>

    </li>

}
</ul>

我的 CSS：

#grpId
{
    background-color:aliceblue;
    list-style-type: none;
    padding-right: 20px;
}

    #grpId li
    {
        height:300px;

        background-color: aliceblue;
        display: inline;
        font-weight: bold;
        font-size: large;
    }
        #grpId li ol
        {
            display: inline;
        }

【问题讨论】：

发布呈现的 html，而不是您的服务器端代码。另外，显示/描述使用当前代码会发生什么
如果你了解razor，你应该不需要看渲染的html
我没有，但我不是寻求帮助的人......而且呈现的 html 更有用，因为它允许我们为您制作一个简单的模型，而无需自己编写标记。如果您让我们更容易为您提供帮助，您就更有可能获得帮助。
我明白了，好点子。这是动态生成的，并且是注入到 div 中的部分视图的一部分，因此呈现的 html 不可见，除非有另一种可能的方式可能会看到它，我不太确定。感谢您在下面的帮助，不胜感激。上面的-1有点苛刻，没关系。 :)
没问题。您通常可以通过“检查元素”来查看 html，无论是使用 firebug 还是使用 chrome 开发工具。取决于您的浏览器

标签： css asp.net-mvc html razor

【解决方案1】：

jsFiddle
请务必指定您的 css 规则所针对的 <li> 类型：#grpId li 将影响两种类型的 <li> 元素，但 #grpId > li 仅针对您的 <ul> 的直接子元素。

#grpId {
    background-color:aliceblue;
    list-style-type: none;
    padding-right: 20px;
}
#grpId > li {
    height:300px;
    display: inline-block;
    font-weight: bold;
    font-size: large;
}
ol > li {
    font-weight: normal;
    font-size: medium;
}

【讨论】：

【解决方案2】：

使用以下样式：

#grpId
{
    overflow: auto;
}

#grpId > li
{
    float: left;
}

【讨论】：