如何在 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 {

        font-size: 18px;

        font-size: 1.8rem;

        background: #3c3f47;

    }

    

entry-title {

    font-size: 1.8rem;

    color: #FFF;

    margin: 0;

    padding: 1.2rem 0;

    display: inline;

}

<span class="entry-header">header</span> 

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

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

    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;

    display: inline-block;

}

Answer 3

包裹在 span 中，或者如果你想使用 h1 标签将 display 设置为 inline-block

<header class="entry-header container">

    <span>Senate Portal</span>

    <span>July 6 ,1966</span>

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