php - 为什么 Chrome 中的 HTML 列表中有如此多的垂直偏移 - 来自 PHP 或样式的空白？

Question

我很难理解为什么我从一个 <li> 得到如此多的垂直偏移(170 像素左右)元素到下一个。我在 Chrome 中看到了这个，但在 Firefox 中没有。它只发生在 <li>存在 PHP 时的元素。如果我删除 <p>，偏移量就会消失第一个标签 <li>元素，删除 PHP foreach在第二个中，或删除 <p> 的样式和 <a>标签。我在下面包含了 CSS。

非常感谢任何帮助。

谢谢，史蒂夫

<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 我们这里sell descant, treble recorders ..."["post_title"]=> string(33) "新学期录音机"["post_excerpt"]=> string(0) ""["post_status"]=> string( 7) "publish"["comment_status"]=> string(4) "open"["ping_status"]=> string(4) "open"["post_password"]=> string(0) ""["post_name"]=> string(11) "tune-pianos"["to_ping"]=> string(0) ""["pinged"]=> string(0) ""["post_modified"]=> string(19) "2013-06-24 10:31:37"["post_modified_gmt"]=> string(19) "2013-06-24 10:31:37"["post_content_filtered"]=> string(0) ""["post_parent "]=> int(0) ["guid"]=> string(34) "t/grandpianos/?p=54">http://localh_t/grandpianos/?p=54"["menu_order"]=> int(0) ["post_type"]=> string(4) "post"["post_mime_type"]=> string(0) ""["comment_count"]=> string(1) "0"["filter"] => 字符串(3) “原始”

Answer 1

我想你可能想使用 float 。 inline-block 和 height 100% 属性似乎有问题。

编辑:如果你不想使用 float ，那么使用这个:

display:table-cell;

在这种情况下，而不是内联 block 。

这是 float 方法。 .gridRow li

的 CSS

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

根据您的 HTML 结构和内容，您可能需要清除 float 。在 float 内容之后使用 div.clear 是一种清晰而独特的方法。 (虽然有 better ways)。

.clear{ clear: both; }

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