Inline-P-Tags innerhalb div

Question

Ich versuche, 3 inline Tags in einem div Container anzuzeigen, aber ich habe ein Problem, wenn ich die font-size von einem Tag ändern. Muss ich das line-height von p Tag anpassen oder gibt es einen universellen Befehl?

Gibt es auch einen Weg, außer margin-left oder margin-right einen Abstand zwischen p Tags zu setzen?

jsfiddle

.container{ 
width:200px; 
padding:10px; 
display:inline; 
} 

.one{ 
float:left; 
font-size:25px; 
} 

.two{ 
float:left; 
} 

.three{ 
float:left; 
} 


<div class="container"> 
<p class="one"> 
    sentence one 
</p> 
<p class="two"> 
    sentence two 
</p> 
<p class="three"> 
    sentence three 
</p> 
</div> 

Answer 1

Verwenden float nicht Inline-Elemente einzustellen. Verwenden display:inline;

Arbeiten DEMO.

ABER Ich schlage vor, Sie p für Inline-Elemente zu vermeiden, verwenden Sie span statt, die für diese sind zu bauen.

Das HTML <span> Element ist ein allgemeiner Inline-Container für Phrasierung Inhalt

workind DEMO.

Answer 2

können Sie display:inline-block verwenden, wenn Sie hier p Tag

ist JSFiddle

verwenden möchten, aber als paolo.basso99 sagte inline Elemente angezeigt werden, sollten Sie span Tag verwenden.

hoffe das hilft.

Answer 3

Dieses Szenario kann mit CSS Flexbox erreicht werden. Um sie gleichmäßig und vertikal zentriert zu machen, müssen Sie diese CSS-Eigenschaften anwenden.

Werfen Sie einen Blick auf den Code unter jsFiddle.

Nur die folgenden Eigenschaften übergeordnetes Element in Ihrem Fall sein in der gleichen Zeile .container

.container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}