Question

在我看来，我有一条这样的界线：

<div class="contact">
 <h6>@Model.Salutation</h6><h3>@Model.FirstName @Model.LastName</h3>
</div>

我正在努力实现一个 Tommy Jones先生，而先生则采用不同的格式。

如下：

.contact h3 {
    font-size: 1.1em;
}

.contact h6 {
    font-size: 0.85em;
    color: gray; 
}

然而，我和先生之间的休息时间，我该怎么做？

Answer 1

您有 h6 标记，后跟 h3 标记。我在想......这是一个真正的标题文字吗？您是否因为格式而不是意义而使用标签？

尝试写：

<div class="contact">
 <span class="title">@Model.Salutation</span><span class="name">@Model.FirstName @Model.LastName</span>
</div>

使用以下CSS（更新以匹配所需的格式）：

.contact .title
{
 font-size: 0.85em;
 color: gray;
}

.contact .name
{
 font-size: 0.85em;
 font-weight: bold;
}

如果您使用的是HTML 5标记，则可能会包含microdata个信息并使用不同的标记。看看这个例子（刚用微数据更新）：

<div class="contact" itemscope itemtype="http://schema.org/Person">
 <span itemprop="title">@Model.Salutation</span>
 <span itemprop="name">@Model.FirstName @Model.LastName</span>
</div>

您的CSS可能会更改为：

div[itemtype="http://schema.org/Person"] > span[itemprop="title"]
{
 font-size: 0.85em;
 color: gray;
}

div[itemtype="http://schema.org/Person"] > span[itemprop="name"]
{
 font-size: 0.85em;
 font-weight: bold;
}

Answer 2

所有h *都是默认的块元素，只是意味着它们将占据容器的整个宽度，将东西推到它的左侧和右侧。

尝试添加display：inline到你的h6和h3

.contact h6, .contact h3 { display:inline }

Answer 3

h3和h6都是blocking elements，因此您要么将display属性更改为inline（我不推荐），要么更改您的标记：

<div class="contact">
 <h3><span class="salutation">@Model.Salutation</span> @Model.FirstName @Model.LastName</h3>
</div>

仅设置span元素的样式。

Answer 4

另一种可能性 - 如果有关“敬礼”的信息在上下文中并不特别相关，但它只是用于为可视化目的引入名称 - 是使用pseudoelements并将信息放在那里：

<div class="contact">
  <h3 data-salutation="@Model.Salutation">@Model.FirstName @Model.LastName</h3>
</div>

和CSS

.contact h3 {
  font-weight: bold;  
}

.contact h3:before {
   content: attr(data-salutation);
   padding-right: 1em;
   font-weight : normal;
}

如何更改部分句子的格式？

4 个答案: