如何在 wordpress/php 的同一行中对齐标题和当前日期？

Question

我有一个 html/php 代码，如下所示：

代码 A：

<header class="entry-header container">

    <?php the_title('<h1 class="entry-title" id="page-entry-title">', '</h1>'); ?>

</header><!-- .entry-header -->

上述html/php代码的 CSS 为：

.entry-header {

    font-size: 18px;

    font-size: 1.8rem;

    background: #3c3f47;

    display: block;

}

.entry-title {

    font-size: 1.8rem;

    color: #FFF;

    margin: 0;

    padding: 1.2rem 0;

}

代码 B：

这是我将用来获取当前日期的函数：

echo date('y-m-d')

问题陈述：

我想知道是否有任何方法可以集成代码 A和代码 B，以便标题和日期显示在同一行。

Answer 1

你的CSS：entry-header {&nbsp; &nbsp; &nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; &nbsp; &nbsp; font-size: 1.8rem;&nbsp; &nbsp; &nbsp; &nbsp; background: #3c3f47;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;entry-title {&nbsp; &nbsp; font-size: 1.8rem;&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 1.2rem 0;&nbsp; &nbsp; display: inline;}<span class="entry-header">header</span>&nbsp;<span class="entry-title">date here</span><--Date in your header--><header class="entry-header container"><span class="entry-title">date here </span><span class="entry-title"><?php the_title('<h1>', '</h1>'); ?></span></header><!-- .entry-header -->例如，请参见此处：https ://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

Answer 2

只需在 the_title() 函数旁边添加 echo 并让 h1 标签显示内联块，这样它就不会占用标题的整个宽度。（在日期周围添加了语义标签，但不是必需的）。PHP：<header class="entry-header container">&nbsp; &nbsp; <?php the_title('<h1 class="entry-title" id="page-entry-title">', '</h1>'); echo '<span class="entry-date">' . date('y-m-d') . '</span>'; ?></header><!-- .entry-header -->CSS：.entry-header {&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; font-size: 1.8rem;&nbsp; &nbsp; background: #3c3f47;&nbsp; &nbsp; display: block;}.entry-title {&nbsp; &nbsp; font-size: 1.8rem;&nbsp; &nbsp; color: #FFF;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 1.2rem 0;&nbsp; &nbsp; display: inline-block;}

Answer 3

包裹在 span 中，或者如果你想使用 h1 标签将 display 设置为 inline-block<header class="entry-header container">&nbsp; &nbsp; <span>Senate Portal</span>&nbsp; &nbsp; <span>July 6 ,1966</span></header><!-- .entry-header -->