显示设置为内联块的元素在MVC for循环中不起作用

Question

我的MVC Razor视图中有一个for循环：

@for (int i = 0; i < 10; i++)
{
   <div class="myInlineBlockElement">some value</div>        
}

班级myInlineBlockElement的格式为display: inline-block。

问题是我无法按顺序输出div。它总是在输出中格式化。因此，div之间存在一些空格（正如从内联块中预期的那样）。

有没有办法在一行中输出for循环元素？

Answer 1

放置元素之间没有空格并不是解决inline-block元素之间出现的差距的唯一方法。相反，您可以使用CSS为div元素的父级提供font-size 0，然后在font-size元素本身上重新添加所需的div。

.container {
  font-size: 0;
}

.myInlineBlockElement {
  background: tomato;
  color: #fff;
  
  display: inline-block;
  font-size: 14px;
}

<div class="container">
    <div class="myInlineBlockElement">some value</div>   
    <div class="myInlineBlockElement">some value</div>   
    <div class="myInlineBlockElement">some value</div>   
    <div class="myInlineBlockElement">some value</div>   
</div>

如您所见，上述代码段中的.myInlineBlockElement元素之间没有差距。