요소 인라인 블록을하는 루프

Question

에 대한 MVC에서 작동하지 않는 설정 디스플레이 내 MVC 면도기보기에서 루프를 가지고있다.

문제는 for 출력을 div로 모두 순서대로 만들 수 없다는 것입니다. 항상 출력 형식이 좋아집니다. 이 때문에 div 사이에 공백이 있습니다 (인라인 블록에서 예상 됨).

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 요소들 사이의 간격이 없습니다.