Question

下面是我的代码片段，我的问题是每当我获取项目的空值或空值时。说 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），您必须使用列表项的显示块才能正常使用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>

Answer 2

您使用的li元素没有ul父级，请尝试此

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

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

当元素值为空时CSS3中断

2 个答案: