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

【问题标题】：Making text and a PHP element display on the same line使文本和 PHP 元素显示在同一行
【发布时间】：2017-05-19 14:00:27
【问题描述】：

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

我试图让页脚中的所有内容都显示在一行上。问题是我的隐私政策页面的链接是一个链接到 WordPress 菜单项的 PHP 元素，并且它真的不想与其他任何东西在同一行。无论如何我都无法让它让步。

这是来自footer.php 文件的sn-p。我也试过用<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 提供的菜单功能，以防将来我想向页脚添加更多链接。有谁知道我怎样才能让 PHP 元素与文本的其余部分位于同一行？

【问题讨论】：

直接粘贴链接会有帮助
css中#site_footer的宽度是多少？你应该试着调查一下
很遗憾我做不到，该网站目前正在我的系统上本地开发，尚未托管
当前宽度为 950 像素，四周有 5 像素的内边距。应该足够多
你能显示页脚的 DOM 截图吗？

标签： php html css wordpress footer

【解决方案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>

【讨论】：

如果php返回的元素是块元素，我认为这不会起作用。

【解决方案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>

【讨论】：

【解决方案3】：

另一种可能的解决方案是使用javascript 更改类内所有元素的css[display: inline-block]。

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

【讨论】：