使文本和 PHP 元素显示在同一行

Question

我正在为我正在开发的网站制作页脚，它目前看起来像这样：

我试图让页脚中的所有内容显示在一行中。问题是我的隐私政策页面的 link 是 WordPress 菜单项 link 的 PHP 元素，它确实没有不想与其他任何事物保持一致。无论我尝试什么，我都无法让它让步。

这是 footer.php 文件中的片段。我也试过用 <p> 标签替换 <span> 标签，但没有用。

<footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> | <?php wp_nav_menu(array('theme_location' => 'footer_nav')); ?> |</span>
</footer>

这是 CSS。我试过添加 display: inline;并显示：块内联；在这些 div 的每一种可能的组合中，都没有什么不同。

/* ~~~ Footer Navigation ~~~ */

#site_footer span {
    font-size: 14px;
    color: #eeeeee;
}

#site_footer a {
    font-weight: bold;
    color: #eeeeee;
    text-decoration: none;
}

#site_footer ul li {
    list-style: none;
}

我考虑过放弃 PHP 方法，只使用 <a> 标签，但我想保留 WordPress 提供的菜单功能，以防我想添加更多 links到未来的页脚。有谁知道如何让 PHP 元素与文本的其余部分位于同一行？

Answer 1

您可以在 div 标签中使用内联样式 display: inline-block;

<footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> |<div style="display: inline-block;"> <?php wp_nav_menu(array('theme_location' => 'footer_nav')); ?> </div> |</span>
</footer>

Answer 2

尝试这样的事情。

对页脚 Div 和 UL 标记使用 display:inline-block css 样式。

#site_footer{
display: inline-block;
}
#site_footer span {
  font-size: 14px;
  color: black;
}

#site_footer a {
  font-weight: bold;
  color: #eeeeee;
  text-decoration: none;
}

#site_footer ul li {
  list-style: none;
  margin-right: 5px;
  display: inline-block;
}
ul{
  display: inline-block;
}

<footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> | <ul><li>Test1</li><li>Test2</li><li>Test3</li></ul> |</span>
</footer>

Answer 3

另一种可能的解决方案是使用javascript更改css[display: inline-block] class.

中的所有元素

<footer id="site_footer">
    <span>Site Name &copy; 2017 | Powered by <a href="https://wordpress.org/">WordPress</a> |<div id="phpelem"> <?php wp_nav_menu(array('theme_location' => 'footer_nav')); ?> </div> |</span>
</footer>

<script>
    document.getElementById("phpelem").style.display = "inline-block";
    var searchEles = document.getElementById("phpelem").children;
    for(var i = 0; i < searchEles.length; i++) {
        searchEles[i].style.display = "inline-block";
    }
</script>

使文本和 PHP 元素显示在同一行

Making text and a PHP element display on the same line

html

css

php

wordpress

footer