CSS-форматирование элемента списка имеет неправильный край

Question

Когда у меня есть неупорядоченный список, отформатированный как встроенные блоки, последний элемент списка в списке, как представляется, имеет дополнительное верхнее поле, если другие элементы имеют любое содержимое блока. Посмотрите на этот HTML:

<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:

#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; 
} 

Почему падение, что последний элемент списка вниз? Вот 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/