Html 函数的作用是：将赢得'；不符合段落标记

我正试图找出如何在段落标记中使用_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>

By/On/In

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

By/On/In

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

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

2014年7月11日前/当日/在



Lorem ipsum door sit amet，Adipising Elite，sed do eiusmod temporal incidedut ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。圣奥凯卡除外…


2014年7月10日前/当日/在


Lorem ipsum door sit amet，Adipising Elite，sed do eiusmod temporal incidedut ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。圣奥凯卡除外…


2014年7月10日前/当日/在


Lorem ipsum door sit amet，Adipising Elite，sed do eiusmod temporal incidedut ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。圣奥凯卡除外…

---

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

由于

the_category（）

函数输出的是一个无序列表，因此需要将列表中的项目内联，并为项目添加一些右边距，以便它们之间有一定的间距

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

---

这是最基本的方法。

我们需要查看由_category（）函数生成的标记。它显然是在输出块级元素（或者称为块级元素的内联元素）。显示使用生成的HTML代码。编辑：对不起，你在标题中说这是一个无序的列表。谢谢！我已经更新了以上信息，请查收！谢谢你的回答。尝试在我的CSS上添加：p.details ul li{display:inline；margin right:10px；}，但它仍然无法修复_category（）函数的位置。它应该可以工作。尝试检查浏览器开发工具（最好是Chrome）中的UL/LI元素，看看是否应用了新样式，或者是否有其他样式覆盖了它。下面是我所做的添加了p.details{display:inline；}UL.post-categories LI{display:inline；margin right:10px；}在单独的行中，它可以工作！谢谢你的回答！真的很有帮助！是的，在我的回答中，我忘了在UL元素中添加内联样式。也许不要做p.details{display:inline；}，试着做p.details ul{display:inline；}-我认为这是更正确的方法：-）

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