목록 요소의 CSS 서식에 부적절한 여백이 있습니다

Question

인라인 블록으로 형식이 지정되지 않은 목록이있는 경우 다른 요소에 블록 내용이 있으면 목록의 마지막 목록 요소에 여분의 위쪽 여백이있는 것으로 보입니다. 이 HTML에서보세요 :

#report_builder li { 
    font-size: 8pt; 
} 

#report_builder > ul { 
    float: left; 
} 

.report_layout { 
    height: 150px; 
} 
.report_layout > li { 
    display: inline-block; 
    padding: 5px; 
    margin-left: 2px; 
    border: 1px solid #ccc; 
    border-top: 10px solid #ccc; 
    height: 100px; 
    background-color:#fff; 
} 
.report_layout > li:last { 
    cursor: default; 
} 
.report_layout > li a { 
    cursor: pointer; 
} 
.report_layout > li:nth-child(even) { 
    background-color:#eee; 
} 

#report_builder input.report-column-value { 
    width: 95px; 
} 

왜 마지막 목록 요소가 드롭 다운 않습니다

여기

<div id="report_builder"> 
    <ul id="report_layout_1" class="report_layout ui-droppable"> 
     <li rel="recid">Id 
      <div><input type="text" class="report-column-value"></div> 
     </li> 
     <li rel="street1">Address 
      <div><input type="text" class="report-column-value"></div> 
     </li> 
     <li> 
      Last Field 
     </li> 
    </ul> 
</div>​ 

는 CSS입니까? 내가하는 일을 데모하는 fiddle입니다.

Answer 1

그것은 이상한,하지만 당신은 vertical-align: top;를 사용하여 상단에 정렬하여 목록 항목을 강제해야한다. working version on jsfiddle을 참조하십시오.

요소는 inline-block 요소가 inline으로 정렬됩니다. 즉 형제가 기준선을 정렬 참조로 사용하기 때문입니다.

Answer 2

인라인 블록이 설정된 요소는 오른쪽으로 4 픽셀 여백으로 렌더링됩니다.

this을 참조하십시오.

<li> 요소 사이의 공백 문제입니다. 공백을 제거하면 문제가 해결됩니다.

Answer 3

li 플로팅을 왼쪽으로두고 인라인으로 표시 할 수 있습니다. 그들은 당신의 jsfiddle에 줄 지어 있습니다.

http://jsfiddle.net/eHmtR/1/