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

下面是我的代码段，我的问题是每当项目的值为空或为null时。
假设itemDescription的值为Empty，所以一切都会向上移动并破坏整个页面

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

我是在做任何基本错误的事情，还是只是在这里缺少链接？

最佳答案

您可以尝试使用min-height属性（检查参考：http://caniuse.com/#feat=minmaxwh），而必须使用显示块来使列表项正确使用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>