css - block 级自关闭 anchor 标记无法正常工作

Question

这里发生了奇怪的 HTML 行为。我有一个 <a href>链接包裹着一个完整的标签，本身包含文章的详细信息。目标是使整个文章 block 可点击。

但是，一旦我在浏览器中运行代码，ahref 自身就会自行关闭，并且在 ARTICLE block 中的每个子元素周围都会出现许多事件。坏消息是它不会使整个文章 block 可点击。

article { margin-bottom: 1.5em; }

.page-header, .entry-header { padding: 0; }

.entry-title, .page-title { margin-top: 0; line-height: 1; padding: 1em .8em 0 .8em; }

.entry-header { position: relative; top: 0; left: 0; width: 100%;  }

.entry-thumb { position: relative; top: 0; left: 0; background-color: rgba(70,64,60,1); }
.entry-thumb img { width: 100%; }

.opacity { opacity: .6; }
.opacity:hover { opacity: 1; }

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    line-height: 1;
    margin: 0;
    padding: 1.5em;
    background: linear-gradient(to bottom, rgba(70,64,60,1) 5%, rgba(70,64,60, 0) 50%);
}
.header-overlay.male { background: linear-gradient(to bottom, rgba(0,0,155,.5) 5%, rgba(0,0,155, 0) 50%); }
.header-overlay.female { background: linear-gradient(to bottom, rgba(255,0,255,.5) 5%, rgba(255,0,255, 0) 50%); }

.header-overlay h1 {
    font-size: 2em;
    line-height: 1;
    color: #FFF;
    padding: 0;
    margin: 0
}

.header-overlay .entry-meta a { color: #FFF; }
.header-overlay .entry-meta { 
    line-height: 2;
    color: #FFF;
    text-transform: uppercase;
    opacity: .7;
    font-size: .8em;
}

以及我编码的来源:

<a href="<?php the_permalink(); ?>" rel="bookmark">
    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
            <figure class="entry-thumb">
                <?php if(has_post_thumbnail()) { the_post_thumbnail( 'large', array('class' => 'opacity') ); } ?>
            </figure>
            <div class="header-overlay">
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta"><?php wordpress_posted_on(); ?></div>
            </div>
        </header>
    </article><!-- #post-## -->
</a>

奇怪的是它输出带有几个 ahref 的代码...

    <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark"></a>

<article id="post-26" class="post-26 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorised">
    <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
    </a>
    <header class="entry-header">
        <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
            <figure class="entry-thumb">
                <img width="640" height="480" src="http://www.fundraising123.org/files/u16/bigstock-Test-word-on-white-keyboard-27134336.jpg" class="opacity wp-post-image" alt="Blue_merle_picture"> </figure>
        </a>
        <div class="header-overlay">
            <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                <h1>
                    Blue Merle Dog              </h1>
            </a>
            <div class="entry-meta">
                <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                    <span class="posted-on">Posted on </span></a>
                <a href="http://localhost/Wordpress/uncategorised/blue-merle/" rel="bookmark">
                    <time class="entry-date published updated" datetime="2015-04-24T00:26:55+00:00">24th April 2015</time>
                </a><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://localhost/Wordpress/author/administrator/">Admin</a></span></span>
            </div>
        </div>
    </header>
</article>

我不介意，但它并没有使整个 block 可点击，只有 h1 标题和帖子元数据(日期和作者)..

编辑:我的 php/wordpress 循环是基本的，如下所示。

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

        <?php if ( have_posts() ) : ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>

                <?php
                    /* Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'content', get_post_format() );
                ?>

            <?php endwhile; ?>

            <?php the_posts_navigation(); ?>

        <?php else : ?>

            <?php get_template_part( 'content', 'none' ); ?>

        <?php endif; ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

使用该行:get_template_part( 'content', get_post_format() ); 调用上面的代码(文章 block 。)

Answer 1

尝试改变这个:

<a href="<?php the_permalink(); ?>" rel="bookmark">

对此:

<a href="<?php the_permalink(); ?>" rel="bookmark" class="entry-link">

然后添加这个 CSS:

.entry-link {
  width: 100%;
  display: block;
}

.entry-link:after {
  content: "";
  display: table;
}

.entry-link:after {
  clear: both;
}

更新:刚刚注意到您的输出...您能向我们展示您正在使用的 PHP 循环吗？

更新 2:删除 float 并为您的 anchor 添加 clearfix 方法。但是，从你的输出来看，你仍然到处都有一些奇怪的 anchor ，你能告诉我们你的 PHP 循环吗？