My goal is to showcase Groups in a horizontal layout, with each group displaying its members. Here's an example:
Group 1: Group 2: Group 3:
1. Joe Blo 1. Bob 1. etc..
2. Joe smith 2. Billybob
3. Joe glow 3. Bobby
I'm grappling with CSS and can't seem to figure out what's missing in my code:
<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>
This is how I've styled it using 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;
}