1

如何将我的跨度放在 p 标签内的文本下方

这是小提琴

http://jsfiddle.net/bobbyfrancisjoseph/H4U7r/

我也在这里粘贴 HTML 代码

<p class="now-p" style="color:#000;">IN THEATERS NOW
    <br>
<span style="font-size:13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trailers,Songs,Ratings,Reviews & Comments</span>

    </br>
</p>

CSS如下。

.now-p {
    padding-bottom:10px;
    margin-bottom: 0px;
    color:#91979e;
    text-align:left;
    font-size:36px;
    font-weight:bold;
}

我试图使输出看起来像这样：

                  IN THEATERS NOW 
     Trailers,Songs,Ratings,Reviews & Comments

现在在 IN THEATERS NOW 之后有一个空格。我无法摆脱它

4

4 回答 4

1

尝试删除您的中断标签并将其添加到您的 CSS：

.now-p span{
    display:block;
    font-size:13px;
}
于 2013-04-26T08:06:43.753 回答
1

这space是由于<br>在行下<p>。如果你IN THEATERS NOW<br/>没有空格，就不会有任何问题。

这可能不是实现您想要的最佳方式。但我希望它有助于理解您遇到问题的原因。

于 2013-04-26T08:12:46.380 回答
1

跨度在文本的正下方，它是文本第一行的行高导致行之间的间距。

设置第一个文本的行高以将它们组合在一起。（并且您可以使用填充来缩进第二行而不是空格。）

HTML：

<p class="now-p" style="color:#000;">
  <span class="header">IN THEATERS NOW</span>
  <br>
  <span class="text">Trailers,Songs,Ratings,Reviews & Comments</span>
</p>

CSS：

.now-p {
  padding-bottom:10px;
  margin-bottom: 0px;
  color:#91979e;
  text-align:left;
  font-weight:bold;
}

.now-p .header {
  font-size: 36px;
  line-height: 35px;
}

.now-p .text {
  font-size: 13px;
  padding-left: 40px;
}

演示：http: //jsfiddle.net/H4U7r/2/

于 2013-04-26T08:19:08.863 回答
0

使用 CSSline-height

.now-p {
    line-height: 15px;
}
于 2013-04-26T08:07:31.260 回答