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
Post a Comment