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