div内のインラインpタグ

Question

インラインpタグをdivコンテナに表示しようとしていますが、タグのfont-sizeを変更すると問題があります。 line-heightのpタグを調整する必要がありますか、または汎用コマンドがありますか？

また、margin-leftまたはmargin-rightを使用して、pタグの間にスペースを入れてください。

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

インライン要素を設定するためにfloatを使用しないでください。 DEMO作業display:inline;

を使用してください。

BUTpをインライン要素に使用しないようにするには、その代わりにspanを使用してください。

HTML <span>要素はフレージングコンテンツ

Workind DEMOのための一般的なインラインコンテナです。あなたはpタグ

に使用したい場合は

Answer 2

あなたがここにJSFiddle

しかしpaolo.basso99がinline要素を表示するために、言ったように、あなたがspanタグを使用すべきである、display:inline-block使用することができます。

これが役に立ちます。

Answer 3

このシナリオは、CSS Flexboxを使用して実現できます。等間隔に配置し、垂直方向に配置するには、これらのCSSプロパティを適用する必要があります。

jsFiddleでコードを見てください。

ただ、その.container

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