Почему <span> открывает новый блок строк?

Question

Я хочу сделать удостоверение личности, имена и страну, чтобы быть всем встроенными

Я завернул их в <span>, как направляемого here

, но пока я вижу, каждый из них в новых строках-блоке.

<md-card-title-text> 
    <span class="md-headline">ID: {{voice.id}}</span> 
    <span class="md-subhead">Name: {{voice.name}}</span> 
    <span style="padding-right: 10em" class="md-subhead">Countries: {{voice.conditionFromUi.countries === null ? "None" : voice.conditionFromUi.countries}}</span> 
    <span class="md-subhead">User flag: {{voice.conditionFromUi.userFlag === null ? "None" : voice.conditionFromUi.userFlag}}</span> 
    <span class="md-subhead">From date: {{voice.conditionFromUi.fromDate === null ? "None" : voice.conditionFromUi.fromDate}} 
      ---> To date: {{voice.conditionFromUi.toDate === null ? "None" : voice.conditionFromUi.toDate}} </span> 
</md-card-title-text> 

меня пытается это еще и купить суб-заголовки в новой линии

<md-card-title-text> 
        <span >ID: {{voice.id}}</span> 
        <span >Name: {{voice.name}}</span> 
        <span style="padding-right: 10em" class="md-subhead">Countries: {{voice.conditionFromUi.countries === null ? "None" : voice.conditionFromUi.countries}}</span> 

и

  <md-card-title-text> 
       <span style="padding-right: 10em; display:block" class="md-headline">ID: {{voice.id}}</span> 
       <span class="md-subhead">Name: {{voice.name}}</span> 
       <span style="padding-right: 10em; display:block" class="md-subhead">Countries: {{voice.conditionFromUi.countries === null ? "None" : voice.conditionFromUi.countries}}</span> 
       <span class="md-subhead">User flag: {{voice.conditionFromUi.userFlag === null ? "None" : voice.conditionFromUi.userFlag}}</span> 

Answer 1

без предоставления какой-то CSS это трудно сказать, что именно является причиной это, но это, скорее всего, что-то в одном из классов элементов span, вызывающих его, возможно, display: block.

Попробуйте установить элементы пролетных для display: inline-block

md-card-title-text span { 
    display: inline-block !important; 
}