Question

我有一行文字如下：

给我们打电话###。###。###

我希望电话号码明显大于文字，我希望它在div中全部对齐。

我似乎无法让这个工作......我缺少什么？

当前HTML：

<div class="accessSlogan">
   <div class="access-slogan-text">GIVE US A CALL AT </div>
   <div class="access-slogan-number">###.###.###</div>
</div>

当前的CSS：

.accessSlogan{
    position: relative;
    float: right;
    display: inline;
}

.access-slogan-text {
    display:inline;
    font-size: 1.2em;
    line-height: 2em;
    padding-right: 6px;
    vertical-align: text-bottom;
}

.access-slogan-number{
    position: relative;
    float: right;
    display:inline;
    font-size: 1.8em;
    line-height: 2em;
    vertical-align: text-bottom;
}

Answer 1

你的标记和CSS看起来都过于复杂，虽然不知道它在页面上的位置，但很难知道这是否有必要。

最简单的就是实现它：

.access-slogan {
    float: right;
    text-transform: uppercase;
}
.access-slogan .access-slogan-number {
    font-size: 1.8em;
}

<p class="access-slogan">Give us a call at <span class="access-slogan-number>###.###.###</span></p>

请注意，由于float适用display:inline及其自己的文档流规则，因此您无法将float和display:block应用于元素。你还会注意到我在CSS中而不是在源HTML中大写了文本，因为这是一个显示器。

Answer 2

相应地使用<strong>标记和样式。

<div class="accessSlogan">
   GIVE US A CALL AT <strong>###.###.###</strong>
</div>

CSS：

.accessSlogan{
   float: right;
}

.accessSlogan strong {
    font-size: 1.8em;
    position:relative;
    bottom:0.4em;
}

重点是使用现有的“语义”HTML与您合作，避免过于复杂的事情。 <strong>标签就是您的意思，所以请使用它:-)

需要调整强文本的相对位置以完美对齐。 0.4em是一个起点（额外高度的一半），但它取决于accessSlogan文本的大小。

Answer 3

我认为你可以使用更多最小的CSS。这是demo here你追求的是什么吗？

Answer 4

使用<span>代替<div>。它将解决您的问题

<div>
 call me at <span>0000-000</span>
</div>

或

<div>
 <span>call me at</span><span>0000-000</span>
</div>

用于设置一行文本样式的CSS

4 个答案: