the_category() 函数添加不适合段落标签的无序列表

Question

我正试图弄清楚如何在段落标签内适合the_category()函数。发生的事情是，我把所有东西都放在一个段落标签里，不会把所有东西都固定在一行里。

下面是一个截图:http://prntscr.com/42u82c

这是我那一行的代码。

<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; }