Question

使用CSS样式表混合两种不同文本格式的标准方法是什么？我正在尝试以下

<span 
class="cv-first">University of Illinois at Urbana-Champaign </span> <span 
class="cv-first-right">Aug. 26<sup>th</sup> 2010</span>

我在样式表中的位置：

.cv-first
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
}
.cv-first-right
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
    text-align:right;
    font-style: italic;
}

但这不起作用。

更新

所以我发现如果我替换

text-align:right;

通过

float: right;

我得到了我正在寻找的东西。所以现在第二部分就在页面的右边。

Answer 1

试试这个：

.cv-first, .cv-first-right
{
    font-variant:small-caps;
    font-family: sans-serif;
    color: #000000;
}
.cv-first-right
{
    text-align:right;
    font-style: italic;
}

Answer 2

SPAN是内联元素：它被视为块容器中对齐文本的一部分

DIV是块元素：它可以浮动向左或向右，而其文本内容对齐

内联元素没有宽度，因此text-align没有任何意义。您可以通过将其声明为块元素并设置宽度来覆盖此行为：

.cv-first-right {
  display: block; /* necesarry for applying width */
  width: 150px; /* default width is 100% */
  float: right; /* move the 150px to the right side */
  text-align: right; /* align text in those 150px right */
}

将CSS格式混合在一行中

2 个答案: