css - 如何水平显示带有元素的列表

Question

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

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

Answer 1

jsFiddle
请务必指定<li>您的 css 规则所针对的类型：#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;
}

Answer 2

使用以下样式：

#grpId
{
    overflow: auto;
}

#grpId > li
{
    float: left;
}