Как изменить форматирование части предложения?

Question

У меня есть такая строка на мой взгляд:

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

Я пытаюсь получить Мистер Томми Джонс , пока Мистер в другом формате.

Как показано ниже:

.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

h3 и h6 оба являются блокирующими элементами , поэтому либо вы изменяете свойство display обоих на inline (что я не рекомендую), либо меняете разметку следующим образом:

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

Стилизация только элемента span.

Answer 3

Все h * по умолчанию являются блочными элементами, просто означая, что они будут занимать всю ширину контейнера, толкая объекты слева и справа от него.

попробуйте добавить дисплей: встроенный в h6 и h3

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

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;
}