javascript - 使用 foreach 使用 Razor 创建一个盒子并在其下方有一个数字的问题

Question

我正在尝试创建这样的东西:

但我遇到了问题，因为它必须在 foreach 循环中进行。

这就是我现在的样子，但它不像图像我不知道如何像我的图像那样做。

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {

              <a href="#" class="box"></a>
              <p>@(counter++)</p>

          }               
  }

CSS:

.框

{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    float: left;     
}

如果有人能帮助我，我将不胜感激。

Answer 1

你必须像这样定义 html:

HTML

<div class="wrapper">
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
    <div class="parent">
      <a href="" ></a>
      <p></p>
    </div>
</div>

CSS

.wrapper{
  text-align:center;
}

.parent{
  display:inline-block;
  *display:inline;/*For IE*/
  *zoom:1;
  text-align:center;
}
.box
{
    border: 1px solid black;
    width: 65px;
    height: 65px;
    display: block;     
}

JS

 @{
       int counter = 1;

          @foreach (IconsViewModel items in Model.AllIconsModel)
          {
              <div class="parent" >
                <a href="#" class="box"></a>
                <p>@(counter++)</p>
              </div>
          }               
  }