Question

这里发生了奇怪的HTML行为。我有一个<a href>链接包裹整个标记，其中包含文章详细信息。目标是使整个文章块可以点击。

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

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>

我不介意，但它不会使整个块可点击，只有h1标题和帖子metas（日期和作者）..

编辑：我的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（））; 调用上面的代码（文章块）。

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：删除了浮动并为您的锚点添加了clearfix方法。但是，根据你的输出判断，你到处都会得到一些奇怪的锚点，你能告诉我们你的PHP循环吗？

块级自闭合锚标记不能正常工作

1 个答案: