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 対象となる 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;
}

Answer 2

次のスタイルを使用します。

#grpId
{
    overflow: auto;
}

#grpId > li
{
    float: left;
}