为什么这么多垂直偏移量的HTML列表在Chrome-空白从PHP或样式？

Question

<ul class="gridRow">
    <li class="cell-2-4 first-child linkBox">
        <a href="<?php echo site_url(); ?>/pianos/" class="pianosLarge">Pianos</a>
        <p>other Links</p>
    </li>
    <li class="cell-2-4 last-child">
        <div class="home-news">
        <?php foreach ($recentposts as $post) : {
            setup_postdata($post);?>
            <h2><?php the_title();?></h2>
            <?php the_content();?><?php
            }
        endforeach;
        wp_reset_query();?>
        </div>
    </li>
</ul>

CSS：

.gridRow li {
    height:100%;
    display:inline-block;
    margin-left: -4px; 
    margin-right: 30px;
    overflow: auto;
}

.cell-2-4 {
    width: 474px;
}

.linkBox a {
    display: block;
    height: 225px;
    padding: 0.6em;
    font-size: 2em;
}

.linkBox p {
    padding: 0 1em 0 1em;
    border-top: 1px solid lightgray;
}

li.first-child {
    margin-left: 0; 
}

li.last-child {
    margin-right: 0; 
}

编辑：按Stackerr请求得$RecentPosts得var_dump：

object(WP_Post)#288(24){[“id”]=>int(54)[“post_author”]=>string(1)“1”[“post_date”]=>string(19)“2013-06-24 10:23:20”[“post_date_gmt”]=>string(19)“2013-06-24 10:23:20”[“post_content”]=>string(64)“我们在siteName出售descant,高音录音机...“[”post_title“]=>string(33)”新学期录音机“[”post_excerpt“]=>string(7)”publish“[”comment_status“]=>string(4)”open“[”ping_status“]=>string(4)”open“[”post_password“]=>string(0)”[“pinged”]=>string(11)“tune-pianos”[“to_ping”]=>string(0)“[”pinged“]=>string(19)”2013-06-24 10:31:37“[”

Answer 1

我想你可能想用花车。内联块和高度100%属性似乎有问题。

编辑：如果你不想使用浮点，那么就用这个：

display:table-cell;

而不是内联块。

.gridRow li {
    float: left;
    display: block;
    margin-left: -4px; 
    margin-right: 30px;
    overflow: auto;
}

.clear{ clear: both; }

<div class="clear"></div>