インラインブロックとしてフォーマットされた順序付けられていないリストがある場合、リスト内の最後のリスト要素は、他の要素にブロック内容がある場合、余分な上余白を持つように見えます。このHTMLを見てみましょう:ここリスト要素のCSS書式設定に余裕がある
<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です。
これは正解です。 'vertical-align:top;'を '.report_layout> li'に追加します –
これは私が行方不明だったものです!本当にありがとう。 – davidethell