html - 如何在 中插入链接并使其与跨度和文本的其他部分保持内联

Question

我的代码是这样的

<style type="text/css">



.post-infos {
    position: absolute;
    bottom: 0px;
    width: 174px;
    background-color: rgba(250,250,250,0.9);
    padding: 5px 12px 12px 12px;
    z-index: 2;
}

.post-infos .main {
    font-size: 14px;
    font-weight: 300;
    color: #222;
    line-height: 18px;
}

.post-infos .main p {
    margin: 0px;
    padding: 0px;
}

.post-infos .main a {
    color: #222;
}

.post-infos .main a:hover {
    color: #26abd3;
}

.post-infos .main .title {
    margin-right: 2px;
    font-size: 16px;
    font-weight: 500;
}



</style>








<div class="post-infos">
<div class="main">

<a href="<?php the_permalink(); ?>" rel="bookmark">
<span class="title">
Title of the Movie
</span>
</a>

(2015)

</div>
</div>

它是这样显示的

How it displays

因为标题变成了一个主播，而主播是长方形的，所以年总会往下走

但我希望它是这样的:

How it should display

正如您在第二部电影中看到的那样，即使它适合该行，年份也会减少，但我希望它适合时放在标题的同一行，就像文本的一部分一样<p> .它实际上非常简单:我想让它像一个简单的 <p> 一样显示，但其中一部分位于链接内，而另一部分不必转到下一行。如果它足够小以留在该行，我希望将它放在标题的右侧，并且仅当它不适合该行时才向下移动，就像在 <p> 中一样。 .

在此先感谢您的帮助

你能看看吗？ http://echidnavideos.altervista.org

当整个东西只有一行时，没关系，年份显示在标题旁边。当年份不适合最后一行时，没关系，它在下面。但是当标题超过一行并且年份应该在它旁边时，它会在下面。

Answer 1

做这个:

 .post-infos .main a {
     color: #222;
     display: block; /* that's the change */
 }

在不改变 html 结构的情况下，年份将永远显示在标题的底部。这是因为 a 标签是一个内联标签，简单的文本将通过堆栈定位。使用显示 block ，您的 a 标签将占据所有水平空间。

如果有什么问题告诉我