css - 我应该如何更改列表的顺序

标签 css asp.net-mvc-3

这是我的代码,用于创建年 + 月列表

    var currentDate = DateTime.Now;
            var list = new List<ArchiveViewModel>();
            for (var startDate = currentDate; startDate >= new DateTime(2012, 8, 1); startDate = startDate.AddMonths(-1))
            {
                list.Add(new ArchiveViewModel
                {
                    Month = startDate.Month,
                    Year = startDate.Year,
                    FormattedDate = startDate.ToString("MMMM, yyyy")
                });
            }
            return PartialView("_ArchiveSidebar", list);

这是我在razor中的代码

@foreach (var archive in Model)
    {
        <ul>
            <li>
                @Html.ActionLink(archive.FormattedDate, "Post", "Archive", new { year = archive.Year, month = archive.Month }, null)
            </li>
        </ul>   
}

在这种情况下结果是这样的

    August, 2013
    July, 2013
    June, 2013
    May, 2013
    April, 2013
    March, 2013
    February, 2013
    January, 2013
    December, 2012
    November, 2012
    October, 2012
    September, 2012
    August, 2012

但是我想要这样的东西

August, 2013    July, 2013
June, 2013      May, 2013
April, 2013     March, 2013
February, 2013  January, 2013
December, 2012  November, 2012
October, 2012   September, 2012
August, 2012

明明数据是静态的,应该怎么做呢??

最佳答案

您没有提供足够的信息来说明数据是静态的还是动态的,它包含了什么样的元素。

我会根据我对你问题的理解来回答你。

您可以使用 List 以您想要的方式格式化数据。将所有元素放入无序列表(即 UL),如下所示:

HTML

<div id="somelist">
<ul>
<li>August, 2013</li>
<li>July, 2013</li>
<li>June, 2013</li>
<li>May, 2013</li>
<li>April, 2013</li>
<li>March, 2013</li>
<li>February, 2013</li>
<li>January, 2013</li>
<li>December, 2012</li>
<li>November, 2012</li>
<li>October, 2012</li>
<li>September, 2012</li>
<li>August, 2012</li>
</ul>
</div>

并且,然后设置包装器 div 的宽度,并在每个具有固定宽度的列表项上使用 display-block,以便它在一行中形成一对两个。像这样:

CSS

#somelist
{
    width:500px;
    padding:10px;
}
#somelist > ul
{
    display:inline-block;
    padding: 0;
    list-style:none;
}

#somelist > ul > li
{
    display:inline-block;
    width:200px;
    padding:2px;    
}

这是一个示例:http://jsfiddle.net/3bwyj/1/

更新

将您的代码替换为以下代码并使用我提供的 CSS:

<div id="somelist">
  <ul>
    @foreach (var archive in Model)
        {
          <li>
              @Html.ActionLink(archive.FormattedDate, "Post", "Archive", new { year = archive.Year, month = archive.Month }, null)
          </li>
        }
  </ul>   
</div>

请注意,我为 UL 添加了一个 DIV 包装器,并且不要忘记将 div 的 ID 从 somelist 更改为其他内容。

关于css - 我应该如何更改列表的顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18109620/

相关文章:

html - 在我的 LI 中,为什么溢出的 bg 颜色与其余部分的 bg 颜色不同?

需要空间才能执行正确操作的 CSS 函数和命令

asp.net-mvc - 将基于声明的授权添加到 MVC 3

javascript - 基于 Toggle 的隐藏元素 - Ratchet

html - 拉维尔 5 CSS : link only the image not the full width of the column

css - 使用 Gulp 连接/重定位 CSS 文件

asp.net-mvc-3 - 在多个 ASP MVC 3 应用程序中单点登录

c# - 如何将复杂对象从 jquery 传递到标记 <a> 中的 Action Controller

c# - MVC 3 : What's the most common way of asynchronously loading form fields based on previous choices?

c# - Html.HiddenFor 绑定(bind)到错误的元素