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

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标签，则可能包含微数据信息，也可以使用其他标签。 看这个例子（只是用微数据更新）：

<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都是阻塞元素 ，因此您可以将两者的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;
}