我是wordpress自定义主题的新手，正在尝试重新创建此网站(http://www.divecarib.com/) 作为惯例。我正试图找到实现以下目标的正确方法：

我创建了一个名为feature的自定义帖子类型。我正在使用get\\u template\\u part函数在我的首页中调用此帖子类型的标题和内容。php。（“功能”基本上是上述网站首页的三大服务亮点之一）

我想把这些功能排列成3个列表项，水平对齐，就像上面的网站一样。每个列表项都包含一个div，该div分别保存标题和内容的h2和p标记。UL位于文章内部。

目前，我已经能够实现我想要的布局，但当使用chrome工具检查代码时，我发现有几件事没有实现。首先，我没有在一个UL中获得3个LI，而是将父文章重复3次，导致3个ULs，每个ULs中只有1个LI。它在网络上看起来是一样的，但它提出了一些问题。父元素不再像以前那样包装子元素（在php文件中实现此结构之前，我将html放在wordpress管理区域，并使用get\\u content（）；这一切都奏效了。）我使用的是完全相同的样式表，没有任何更改，所以我希望事情看起来是一样的，但我现在无法将背景色应用到文章中，因为它没有包装子对象。

此外，在保存帖子类型内容的实际p标记之前和之后都有空的p标记。

感谢您的帮助，当前代码如下。

front-page.php

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

        <h1><?php  the_title();?></h1>

        <?php
        $args = array(
            \'post_type\' => \'feature\',
            \'posts_per_page\' => 3
            );

        $loop = new WP_Query($args);

        if ( $loop -> have_posts() ) :

            /* Start the Loop */
            while ( $loop -> have_posts() ) : $loop -> the_post();

                /*
                 * Include the Post-Format-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                 */
                //get_template_part( \'template-parts/content\', get_post_format() );
                ?>
                <?php  get_template_part( \'template-parts/content\', \'feature\' );

                 ?>

                <?php  

            endwhile;

            //the_posts_navigation();

        else :

            //get_template_part( \'template-parts/content\', \'none\' );

        endif; ?>

        wp_reset_postdata();

    </main><!-- #main -->
</div><!-- #primary -->

content-feature.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<ul>
    <li>
        <div>
            <h2><?php the_title(); ?></h2>
            <p><?php the_content(); ?></p>
        </div>
    </li>
</ul>

风格css

    #page{
    background-image: url(\'../../../wp-includes/images/mainImage.jpg\');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
}
#content{
    margin:0 auto;
    max-width:980px;
}
#primary{
    max-width: 742px;
    margin: auto 72px auto auto;
}

main h1{
    text-align: center;
    color: white;
    font-weight: bold;
}

main ul li{
    list-style: none;
    max-width: 215px;
    display: inline-block;
    text-align: left;
    margin: 0 10px;
    line-height: 100%;
    color: #26729B;
    float:left;

}

main ul li p{
    font-family:Arial;
    font-size: 14px;
}

main ul li h2{
    line-height: 120%;
    font-weight: bold;
    font-size: 1.6em;

}
main ul{
    text-align: center;
    padding: 0px;
    margin: 0 auto;
}

main > div > p{
    text-align: center;
    padding:0px 0px 15px 0px;
    margin:0px;
    color: #434A52;
    font-size: 36px;
}

main > article {
    background-color: rgba(255, 255, 255, 0.66);
    padding:0px;
}