0

ある要素から次の要素への垂直方向のオフセット (170px っぽい) が非常に大きい理由を理解するのに苦労してい<li>ます。これは Chrome では表示されますが、Firefox では表示されません。PHP が存在する場合にのみ<li>要素で発生します。<p>最初の<li>要素からタグを削除するか、2 番目の要素の PHP を削除するか、 タグとタグ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; 
}

EDIT: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) " 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"]=> 文字列(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;

この場合、インラインブロックの代わりに。

ここでは float メソッドを使用します。.gridRow liの 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 に答える