0

这是简单的html

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

和我试过的css

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

像这样调出输出

这里还有一些文字

我想要更多的 p 行。

4

4 回答 4

2

p是块级元素。所以你不能内联到a. 因此，您需要将您的样式设置p为display: inline;或display: inline-block;，然后给予display: inline;或display: inline-block;a

这是小提琴。

于 2013-06-19T07:01:30.650 回答
2

您还需要给出段落display: inline-block;，因为它是块级元素。因此，它会自动占用可用空间并将锚点推到新行。此外，您还需要将关闭添加"到您的href-attribute。

（如果您能够操纵段落的标记 - 只需在其中添加锚点。）

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或类似的东西。

于 2013-06-19T07:01:52.993 回答
0

使用此代码

CSS：

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

HTML：

<p>some text here <a href="#">more</a></p>
于 2013-06-19T07:03:20.777 回答
0

只需将以下 CSS 添加到您的样式表中。

p{ dislpay:inline-block;}

P是一个块级元素，所以下一个内联元素出现在标签inline-block旁边。p

于 2013-06-19T07:14:24.243 回答