内嵌事后元素块元素
下面是简单的HTML内嵌事后元素块元素
<p> some text here </p>
<a href="#">more</a>
,我试图
p+a{
color: #f00;
display: inline-block;
/* also tried float: left; */
}
要打开的输出,因为这
一些文本这里的CSS 更多
我想要更多在第p行。
p
是块级元素。所以你不能内联到a
。因此,你需要你的风格作为p
或display: inline;
和display: inline-block;
然后给display: inline;
或display: inline-block;
到a
这里是fiddle。
您还需要给段落display: inline-block;
,因为它是一个块级元素。因此它会自动获取可用空间并将锚点推到新的一行。您还需要将"
关闭添加到您的href
-属性中。
(如果你能操纵段的标记 - 只需添加锚点它里面。)
HMTL:
<p>some text here</p>
<a href="#">more</a>
CSS:
p {
display: inline-block;
}
p + a {
color: #f00;
display: inline-block;
}
注意:请使用类来代替元素的样式。添加一个类到你的锚点,并选择p + .read-more
或类似的东西。
当我尝试使用内联块时,我的模板上出现了一些问题,但它没有显示任何内容,但是当我尝试内联时,它对网站没有任何影响。 –
我在一个空白的html页面上试过它,它工作得很好。我相信,将内联的自然块级元素显示为内联并不是一个真正适合的方法。 – kleinfreund
我知道,但没有奏效。 –
使用此代码
CSS:
p > a {
color: #f00;
display: inline-block;
font-size: 18px;
}
HTML:
<p>some text here <a href="#">more</a></p>
注意:作者无法更改标记。目前他无法将锚定在段落内。 – kleinfreund
只需添加以下CSS到你的样式表。
p{ dislpay:inline-block;}
P
是一个块级元素使它inline-block
所以下一内嵌元素拿出旁边p
标签。
你为什么要复制答案,其他人已经提供了几分钟的时间? – kleinfreund
解释你想要什么? – Shahbaz
您可以将锚点放在段落内并向其中添加一个类。然后你就可以对课程进行设计。这对你有用吗? – kleinfreund
@Shahbaz我想要“更多”的p行。 –