Question

所以我有一个小问题，真的很困扰我。我试图制作一条线但是现场将h3和sup分成两条不同的线。

<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> &nbsp;<sup>
Forgot? I got you &nbsp; &nbsp;</sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>

这个概念是让“忘了？我找到了你”，按钮位于同一条线上，但距离“同意”一词稍远一点。

Answer 1

由于您还没有真正提供您想要结果的确切示例，您可以考虑使用以下标记：

<h3 style='color: crimson; display:inline-block;'>
    CONSENT&nbsp;&nbsp;
</h3>
<small>
  Forgot? I got you 
  <a href="http://www.exampledomain.com/example" target="_blank">Script</a>
</small>

这是做什么的：

<h3>和其他标题标记是块级元素，这意味着默认情况下它们不会被内联呈现。您可以使用display:inline;或display:inline-block;
<font>标记尚未使用多年，您最好只将样式属性应用于最相关的标记以设置内容的样式。
您之前在<p>标记中使用了所有这些标记，这可能构成无效标记。它们各自已经分解，如果您需要某种类型的容器标签，可以使用<div>。
使用小标记<sup>替换上标标记<small>，以使所有内容保持在同一行。如果您愿意，可以替换它。
以前，您使用的是target="_black"，毫无疑问，您的target="_blank"标记就是<a>。
一般情况下，您希望避免使用大量的内联样式标记，而使用实际的CSS文件以及class属性。

示例

<h3 style='color: crimson; display:inline-block;'> CONSENT   </h3> <small> Forgot? I got you <a href="http://www.exampledomain.com/example" target="_black">Script</a> </small>

Answer 2

您的代码需要大量工作，但实际上您可以通过简单的CSS实现此目的。尽管如此简单，我会在<span>元素上使用vertical-align，但遗憾的是vertical-align: middle;不能直接在<p>或<h3>标记上使用。还有很多其他方法可以通过单独的<div>来实现这一目标，而且所有这些都是最基本的。

HTML：

<span class="vAlign">
    <h3 class="crimson flt-left vAlign">CONSENT</h3>
    &nbsp;
    <p class="vAlign"><a href="http://www.exampledomain.com/example"
    target="_black">Forgot? I got you</p>
</span>

和CSS

.flt-left{
    float: left;
}
.crimson {
    color: crimson;
}
.vAlign {
    display:inline-block;
    vertical-align: middle;
}

段落分为2行

2 个答案: