如何以水平元素顯示列表

-2

我試圖水平顯示組，每個組列出屬於該組的成員。例如：如何以水平元素顯示列表

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

來源

2013-02-23 TMan

後的直接兒童所提供的HTML，不你的服務器端代碼。此外，使用你當前的代碼顯示/描述會發生什麼 – nbrooks 2013-02-23 18:52:50

如果你理解剃刀 – TMan 2013-02-23 19:08:47

我不需要看到呈現的html，但我不是那個尋求幫助的人......也是呈現的html更有用，因爲它允許我們爲您製作簡單的模型，而無需自己編寫標記。如果你讓我們更容易幫助你，你更有可能獲得幫助。 – nbrooks 2013-02-23 19:11:47

使用以下款式：

#grpId 
{ 
    overflow: auto; 
} 

#grpId > li 
{ 
    float: left; 
}

來源

2013-02-23 19:04:46

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

來源

2013-02-23 19:04:51 nbrooks

如何以水平元素顯示列表

回答

相關問題