html - 当元素值为空时 CSS3 中断

Question

下面是我的代码片段，我的问题是每当我为元素获取空值或 null 值时。 假设 itemDescription 值为空，所以所有内容都向上移动一个并打断整个页面

    <span class="itemDetails">
         <li class="items"><%=itemDescription%></li>
        <li class="items"><%= itemNumber || item.rTagID %></li>
        <li class="items"><%=itemBayId%></li>
        <li class="items"><%=itemAmnt%></li>
    </span>

CSS 代码

    .itemDetails {
       display: inline-block;
     }
    .items{
       display: table-row;
     }

我是不是基本上做错了什么，或者只是漏掉了一个链接？

Answer 1

您可以尝试使用 min-height 属性(检查引用:http://caniuse.com/#feat=minmaxwh)您必须使用列表项的显示 block 才能正确使用 min-height .

<style type="text/css">
 .itemDetails {
       display: inline-block;
     }
    .items{
        border:1px solid red;
       display: block;
       min-height:40px;
     }


</style>
<ul class="itemDetails">
    <li class="items">abcde</li>
    <li class="items"></li>
    <li class="items">lmnop</li>
    <li class="items">qrstuv</li>
    <li class="items">wxyz</li>
    <li class="items">abcde</li>
    <li class="items">fghijk</li>
    <li class="items">lmnop</li>
    <li class="items">qrstuv</li>
    <li class="items">wxyz</li>
</ul>