html - Element with display set to inline-block does not work in MVC for loop -



html - Element with display set to inline-block does not work in MVC for loop -

i have loop in mvc razor view:

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

and class myinlineblockelement has style display: inline-block.

the problem cannot create output div in sequence. pretty formatted in output. because of this, there spaces between divs (as expected inline-block).

is there way output loop elements in single line?

placing elements no spaces between them isn't way around gap appears between inline-block elements. instead can utilize css give parent of div elements font-size of 0, re-add desired font-size on div elements themselves.

class="snippet-code-css lang-css prettyprint-override">.container { font-size: 0; } .myinlineblockelement { background: tomato; color: #fff; display: inline-block; font-size: 14px; } class="snippet-code-html lang-html prettyprint-override"><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 can see, there no gaps between .myinlineblockelement elements in above snippet.

html css asp.net-mvc asp.net-mvc-4 razor

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -