如何在 <p> 中插入 link 并使其与跨度和文本的其他部分保持一致

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> 一样显示，但一部分在 link 内，而另一部分不必转到下一行。如果它足够小以留在该行，我希望将它放在标题的右侧，并且仅当它不适合该行时才向下移动，就像在 <p>.[= 中一样。 19=]

在此先感谢您的帮助

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

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

Answer 1

就做这个：

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

年份将永远显示在标题的底部，而不会更改您的 html 结构。这是因为 a 标签是行内标签，简单的文本会按堆栈定位。使用显示块，您的 a 标签将占据所有水平 space.

如果有什么问题告诉我

如何在 <p> 中插入 link 并使其与跨度和文本的其他部分保持一致

How can I insert a link inside a <p> and keep it inline with spans and other parts of text

html

css

anchor

inline

block