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

Question

我的 MVC Razor View 中有一个 for 循环:

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

类 myInlineBlockElement 有一个样式 display: inline-block。

问题是我不能让for按顺序输出div。它总是在输出中得到漂亮的格式化。因此，div 之间有一些空格(正如内联 block 所期望的那样)。

有没有办法在一行中输出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 元素之间没有间隙。