How do I list items horizontally in ASP.NET MVC?

Question

I tried various solutions found on Stack Overflow and elsewhere but nothing works. I list my items with a foreach loop, they appear vertically but I want them to be listed horizontally.

This is the code in my View:

<ul>
    @foreach(var item in Model)
    {
        <li>
            <h3>@Html.DisplayFor(modelItem => item.Title)</h3>       <br />
            @Html.DisplayNameFor(model => model.VariesUntil): @Html.DisplayFor(modelItem => item.VariesUntil)  <br />
            @Html.DisplayNameFor(model => model.ZipId): @Html.DisplayFor(modelItem => item.ZipId)    <br />
        </li>
    }
</ul>

A little bit of css will fix this, its not really an issue with your view. — Dan Schnau, Jun 04 '14 at 19:54

score 3 · Answer 1 · answered Jun 04 '14 at 19:55

3

ul li { display:inline; }

In your CSS will do the trick.

answered Jun 04 '14 at 19:55

HaukurHaf

13,522
5
44
59

You are doing something wrong. This is as trivial as it gets when it comes to CSS. Show us some code. – HaukurHaf Jun 04 '14 at 20:21
Agreed @HaukurHaf. Something's surely not right. I'd recommend using FireBug or similar tool to see what could be wrong with the generated HTML. – James R. Jun 04 '14 at 20:44

score 2 · Accepted Answer · answered Jun 05 '14 at 18:26

2

Try

ul li {display:inline-block;}

jsfiddle

@HukurHaf's answer is correct unless there aren't H3 or input tags inside li.

so

<ul>
  <li>1</li>
  <li>2</li>
</ul>

with display:inline; will render side by side but the moment you put H3 or input tag then it will not render side by side.

answered Jun 05 '14 at 18:26

Mitul

9,734
4
43
60

is it possible to only display 4 items per line? – Tassisto Jun 05 '14 at 20:03

How do I list items horizontally in ASP.NET MVC?

2 Answers2