1

我正在添加一个跨度来包装文本的某个部分，以便我可以对其应用特定的字体，但由于某种原因，它下降到下面，因此它的一部分位于包含所有文本的段落的基线之下。

任何人对如何将其（跨度）向上移动以使其与文本的其余部分位于同一行有任何想法吗？

我正在尝试相对定位，但我想知道是否有更好的方法。

这是代码：

<!Doctype HTML>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
        html, body{
        margin:0;
        padding:0;
        font-size:16px;
        }
        .container{
        height:342px;
        width:100%;
        padding-top:2em;
        padding-left:2em;
        background:#ffffff;
        background:rgb(255, 255, 255);
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
       box-sizing:border-box;
       color:#333333;
       color:rgb(51, 51, 51);
       font-family:'Trend';
       font-size:120%;
       font-size:1.2rem;
       *behavior:url(../scripts/boxsizing.htc);
    }
    #welcome{
        background:#8cc047;
        background:rgb(140, 192, 71);
    }
    #welcome p.title{
        margin:0;
        font-size:225%;
        font-size:2.25rem;
    }
    #name{
        position:relative;
        font-family:'Cubano-web',Cubano,'Trend';
        left:16px;
        top:-7.1px;
    }
    </style>
    </head>
    <body>
        <header class="container" id="welcome">
        <p class="title">Hello,</p>
        <p class="title">I'm <span id="name">Noah</span>&mdash;</p>
        </header>
    </body>
</html>
4

2 回答 2

1

我可能误解了这个问题，但如果你希望它在同一行，你不应该将文本分成 2 个<p>标签

jsFiddle

<header class="container" id="welcome">
    <p class="title">Hello, I'm <span id="name">Noah</span>&mdash;</p>
</header>

编辑

好的，所以我认为您正在使用几乎没有人会使用的自定义字体，这就是引发这个问题的原因。我建议您使用Mac 和 Windows 的标准字体或 CSS3@font-face以包含不同的字体，否则您无法确定用户是否会拥有它们（就像现在一样）。

至于对齐自定义字体，基本上你不能很好地做到这一点并保证它会正确显示。例如，您可以尝试position:relative;使用之前使用的方法，在这种情况下，我建议您使用emnot px。使用em将解决缩放和不同设备带来的许多响应问题，因为您将根据字体大小而不是像素来移动它。

于 2013-04-05T08:28:17.137 回答
1

如果这是您需要的，请在第一行和另一行中的其他文本中打招呼，然后将此 css 添加到标题类

.title{
    clear:both;
    float:left;
    display:inline;
  }

并删除 top 和 left 属性，#name 使其像这样..

删除position:relative也；

 #name{
            font-family:'Cubano-web',Cubano,'Trend';
    }

这是小提琴
http://jsfiddle.net/tFJ2x/1/

于 2013-04-05T08:34:58.700 回答