複数の段落タグを同じ行に配置する

-2

メインテキスト（hello）は左側に、バックグラウンドテキスト（読み込み）は右側に、メインテキストは垂直にします。複数の段落タグを同じ行に配置する

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="load.css"> 
 
    <title>Hello</title> 
 
</head> 
 

 
<body> 
 
    <div class="textContainer"> 
 
    <p class="hello">Hello</p> 
 
    <div class="backgroundInfo"> 
 
     <div class="spinner"></div> 
 
     <p class="notifText">Loading</p> 
 
    </div> 
 
    <div class="loader"></div> 
 
    </div> 
 
</body> 
 

 
</html>

（スピナーとローダがCSSアニメーションです）

出典

2017-10-05 Michael

これを試してみてください。

.hello { 
 
    float: left; 
 
} 
 

 
.notifText{ 
 
    float: right; 
 
} 
 

 
.loader { 
 
    clear: both; 
 
}

<div class="textContainer"> 
 
    <p class="hello">Hello</p> 
 
    <div class="backgroundInfo"> 
 
     <div class="spinner"></div> 
 
     <p class="notifText">Loading</p> 
 
    </div> 
 
    <div class="loader"></div> 
 
</div>

出典

2017-10-05 04:09:28 Ehsan

helloのフォントサイズは200pxです。notifTextをそれよりも小さくしたいと思っています。どのように整列させることができるのでしょうか.hello？ – Michael

は、両方の段落が同じに表示させるにはラインだけを使用します。

p{ 
    float: left; 
}

次のステップは、要素とcointainer両方のCSS幅になります。

出典

2017-10-28 11:21:49

複数の段落タグを同じ行に配置する

答えて

関連する問題