之后将元素内联到块元素

Question

这是简单的html

<p> some text here </p>
<a href="#">more</a>

和我试过的CSS

p+a{
  color: #f00; 
  display: inline-block;
  /* also tried float: left; */
}

以此<

显示输出

  

这里的一些文字更多

我想在<。

行中更多

Answer 1

p是块级元素。所以你无法内联到a。因此，您需要将p设为display: inline;或display: inline-block;，然后将display: inline;或display: inline-block;设为a

这是fiddle。

Answer 2

您还需要提供段落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或类似的东西选择它。

Answer 3

使用此代码

<强> CSS：

p > a {
    color: #f00; 
    display: inline-block;
    font-size: 18px;
}

<强> HTML：

<p>some text here <a href="#">more</a></p>

Answer 4

只需将以下css添加到样式表即可。

p{ dislpay:inline-block;}

P是一个块级元素，使其成为inline-block，因此下一个内联元素会出现在p标记旁边。