Question

我试图找出如何在段落标记内容纳the_category（）函数。会发生什么事情，我把所有内容都放在一个段落标签中，并且不会在一行内修复所有内容。

这是我的代码。

<p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(); ?></p>

这是该部分代码的完整片段（循环）：

<ul class="negative-margin">
        <li>
         <?php while(have_posts()) : the_post(); ?>
          <h1><a href="<?php the_permalink(); ?>" class="gray">
            <?php the_title(); ?>
            </a></h1>
          <p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(); ?></p>
          <?php if (has_post_thumbnail()) : ?>
          <figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>
          <p class="excerpt"> <?php the_excerpt(); ?> </p>
          <div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>
        </li>
        <?php endif; ?>
        <?php endwhile; ?>

</ul>

这是使用该代码生成的标记：

      <ul class="negative-margin">
        <li>
                   <h1><a href="http://localhost/themewp/when-you-are-expecting-something/" class="gray">
            When you are expecting something!            </a></h1>
          <p class="details">By <a href="6">Sam Norton </a> / On July 11, 2014 / In <ul class="post-categories">
    <li><a href="http://localhost/themewp/category/life-hacks/" title="View all posts in Life Hacks" rel="category tag">Life Hacks</a></li>
    <li><a href="http://localhost/themewp/category/life-tips/" title="View all posts in Life Tips" rel="category tag">Life Tips</a></li></ul></p>
                    <figure> <a href="http://localhost/themewp/when-you-are-expecting-something/"><img width="757" height="437" src="http://localhost/themewp/wp-content/uploads/2014/07/thumb1.jpg" class="opacity-hover box-layer img-responsive wp-post-image" alt="thumb1" /></a> </figure>
          <p class="excerpt"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat &#8230;</p>
 </p>
          <div class="btn-margin"> <a href="http://localhost/themewp/when-you-are-expecting-something/" class="btn btn-primary">CONTINUE READING >>> </a> </div>
        </li>
                          <h1><a href="http://localhost/themewp/sam-is-an-idiot/" class="gray">
            What to do if you face your giants            </a></h1>
          <p class="details">By <a href="6">Sam Norton </a> / On July 10, 2014 / In <ul class="post-categories">
    <li><a href="http://localhost/themewp/category/life-tips/" title="View all posts in Life Tips" rel="category tag">Life Tips</a></li></ul></p>
                    <figure> <a href="http://localhost/themewp/sam-is-an-idiot/"><img width="757" height="437" src="http://localhost/themewp/wp-content/uploads/2014/07/thumb2.jpg" class="opacity-hover box-layer img-responsive wp-post-image" alt="thumb2" /></a> </figure>
          <p class="excerpt"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat &#8230;</p>
 </p>
          <div class="btn-margin"> <a href="http://localhost/themewp/sam-is-an-idiot/" class="btn btn-primary">CONTINUE READING >>> </a> </div>
        </li>
                          <h1><a href="http://localhost/themewp/the-only-thing-you-need-in-life/" class="gray">
            The only thing you need in life            </a></h1>
          <p class="details">By <a href="6">Sam Norton </a> / On July 10, 2014 / In <ul class="post-categories">
    <li><a href="http://localhost/themewp/category/life-hacks/" title="View all posts in Life Hacks" rel="category tag">Life Hacks</a></li></ul></p>
                    <figure> <a href="http://localhost/themewp/the-only-thing-you-need-in-life/"><img width="757" height="437" src="http://localhost/themewp/wp-content/uploads/2014/07/thumb1.jpg" class="opacity-hover box-layer img-responsive wp-post-image" alt="thumb1" /></a> </figure>
          <p class="excerpt"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat &#8230;</p>
 </p>
          <div class="btn-margin"> <a href="http://localhost/themewp/the-only-thing-you-need-in-life/" class="btn btn-primary">CONTINUE READING >>> </a> </div>
        </li>

</ul>

知道怎么解决这个问题吗？谢谢！

Answer 1

由于the_category()函数正在输出无序列表，您需要使列表中的项目内联并为项目添加一些右边距，以便它们之间有一些间距。

p.details ul.post-categories li { display:inline; margin-right:10px; }

这是最基本的方法。

the_category（）函数将无序列表添加到段落标记中

1 个答案: