0

<li>我很难理解为什么我从一个元素到下一个元素有如此多的垂直偏移（170px-ish） 。我在 Chrome 中看到了这一点，但在 Firefox 中没有。它仅在<li>PHP 存在时发生在元素中。<p>如果我从第一个元素中删除标签，在第二个<li>元素中删除 PHP ，或者删除and标签foreach的样式，偏移量就会消失。我已经包含了下面的css。<p><a>

任何帮助将不胜感激。

谢谢，史蒂夫

<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 卖低沉的，高音录音机 ..." ["post_title"]=> string(33) "新学期录音机" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "发布" ["comment_status"]=> 字符串(4) "open" ["ping_status"]=> 字符串(4) "open" ["post_password"]=> 字符串(0) "" ["post_name"]=>字符串（11）“调钢琴”[“to_ping”]=>字符串（0）“" ["pinged"]=> 字符串(0) "" ["post_modified"]=> 字符串(19) "2013-06-24 10:31:37" ["post_modified_gmt"]=> 字符串(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"]=> string(3) "raw" }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"]=> string(3) "raw" }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"]=> string(3) "raw" }post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" }post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" }

4

1 回答 1

0

我想你可能想使用花车。inline-block 和 height 100% 属性似乎存在问题。

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

display:table-cell;

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

这是浮动方法。.gridRow的 CSS

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

根据您的 HTML 结构和内容，您可能需要清除该浮动。在浮动内容之后使用 div.clear 的一种清晰而独特的方式。（虽然有更好的方法）。

.clear{ clear: both; }

<div class="clear"></div>
于 2013-06-24T15:57:34.930 回答