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

我试图弄清楚如何使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>

任何想法如何解决这个问题？谢谢！

最佳答案

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

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

这是最基本的方法。

关于html - the_category()函数添加一个不适合段落标签的无序列表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24753289/