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

Question

I have a for loop in my MVC Razor view:

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

And the class myInlineBlockElement has a style display: inline-block .

The problem is that I cannot make the for output the div all in sequence. It always get pretty formatted in output. Because of this, there is some spaces between the divs (as it would be expected from a inline-block).

Is there a way to output the for loop elements in a single line?

Answer 1

Placing the elements with no spaces between them isn't the only way to get around the gap which appears between inline-block elements. Instead you can use CSS to give the parent of your div elements a font-size of 0, then re-add your desired font-size on the div elements themselves.

 .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> 

As you can see, there are no gaps between the .myInlineBlockElement elements in the above snippet.