faアイコン、pタグ、スパンインラインを表示するにはどうすればいいですか？

Question

私は私がチャットアイコンの同じ行の高さに配置することはできません右ボタンで苦労しています。この

のように見えるチャットウィンドウを作成しようとしていますpタグ....私はそれをすばやく効率的なやり方でやりたい、私はdivのすべてのdivに設定し、余白とサイズを設定することができます知っている - しかし、おそらくより良い方法があるかもしれないと思う。ここではここ

は、私がこれまで行ってきたものです...

<div class="faq_chat"> 
    <div class="chat_con"> 
    <i class="fa fa-comments" aria-hidden="true"></i> 
    <p>Welcome to some chat system, please</p> 
    <br> 
    <p>provide your first name or alias to start chat.</p> 
    <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p> 
</div> 

  .faq_chat { 
     padding-top: 30px; 
     padding-left: 30px; 
     padding-right: 30px; 
     width: 100%; 
     height: 400px; 
     background-color: #d2f1f0; 
     z-index: 99; 
     float: left; 
    } 

    .chat_con { 
     float: left; 
     line-height: 0.3; 
     padding: 18px 14px 16px 21px; 
     width: 100%; 
     height: 60px; 
     background-color: #5d3c95; 
     color: white; 
     border-bottom: 2px solid white; 
    } 

    .chat_con p { 
     font-size: 10px; 
    } 

    .chat_con i, 
    .chat_con p, 
    .chat_con span { 
     display: inline; 
    } 

    .fa-comments { 
     font-size: 30px; 
     margin-right: 15px; 
    } 

    .chat_input { 
     width: 100%; 
     height: 50px; 
     background-color: #41c8c2; 
     color: white 
    } 

私Fiddle

Answer 1

がline-heightとfloat財産の使用

変更を加えるありますmade in html

Link for reference

.faq_chat { 
 
    padding-top: 30px; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: #d2f1f0; 
 
    z-index: 99; 
 
    float: left; 
 
} 
 

 
.chat_con { 
 
    float: left; 
 
    line-height: 0.3; 
 
    padding: 18px 14px 16px 21px; 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: #5d3c95; 
 
    color: white; 
 
    border-bottom: 2px solid white; 
 
} 
 

 
.chat_con p { 
 
    font-size: 10px; 
 
} 
 

 
.chat_con i, 
 
.chat_con p, 
 
.chat_con span { 
 
    display: inline; 
 
} 
 

 
.fa-comments { 
 
    font-size: 30px; 
 
    margin-right: 15px; 
 
} 
 

 
.chat_input { 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: #41c8c2; 
 
    color: white 
 
} 
 

 
.float-left { 
 
    float: left; 
 
} 
 

 
.float-right { 
 
    float: right; 
 
} 
 

 
.clearfix::after { 
 
    content: ""; 
 
    display: table; 
 
    width: 100%; 
 
    clear: both; 
 
} 
 

 
.left-info { 
 
    position: relative; 
 
    padding-left: 35px; 
 
} 
 

 
.left-info i.fa-comments { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 

 
.left-info p { 
 
    max-width: 60%; 
 
    display: block; 
 
    line-height: 14px; 
 
} 
 

 
.right-info p { 
 
    line-height: 22px; 
 
}

<div class="faq_chat"> 
 
    <div class="chat_con clearfix"> 
 
    <div class="float-left"> 
 
     <div class="left-info"> 
 
     <i class="fa fa-comments" aria-hidden="true"></i> 
 
     <p>Welcome to some chat system, please provide your first name or alias to start chat.</p> 
 
     </div> 
 
    </div> 
 
    <div class="float-right"> 
 
     <div class="right-info"> 
 
     <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

与えるこれ試してみてください..あなたが与えることができるこのことができます

・ホープ..

Answer 2

はこの試みる

<div class="faq_chat"> 
     <div class="chat_con"> 
     <p>Welcome enter code hereto some chat system, please</p> 
     <p>provide your first name or alias to start chat.</p> 
     <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p> 
     </div> 
    </div> 


    .faq_chat { 
     padding-top: 30px; 
     padding-left: 30px; 
     padding-right: 30px; 
     width: 100%; 
     height: 400px; 
     background-color: #d2f1f0; 
     z-index: 99; 
     float: left; 
    } 

    .chat_con { 
     float: left; 
     line-height: 0.3; 
     padding: 18px 14px 16px 21px; 
     width: 100%; 
     height: 80px; 
     background-color: #5d3c95; 
     color: white; 
     border-bottom: 2px solid white; 
    } 

    .chat_con:before { 
     font: normal normal normal 14px/1 FontAwesome; 
     content: "\f086"; 
     font-size: 30px; 
     text-rendering: auto; 
     -webkit-font-smoothing: antialiased; 
     margin-top:-5px; 
     margin-right:15px; 
     float:left; 
    } 

    .chat_con p { 
     font-size: 10px; 
     width:80%; 
     float:left; 
    } 

    .chat_con p:last-child { 
     position:absolute; 
     right: 45px; 
     top: 58px; 
     width:50px; 
    } 

    .chat_con i, .chat_con p, .chat_con span { 
     display: inline; 
    } 

    .fa-comments { 
     font-size: 30px; 
     margin-right: 15px; 
    } 

    .chat_input { 
     width: 100%; 
     height: 50px; 
     background-color: #41c8c2; 
     color: white 
    } 

Answer 3

HTML

<div class="faq_chat"> 
    <div class="chat_con"> 
    <div class="msgicon"> 
    <i class="fa fa-comments" aria-hidden="true"></i> 
    </div> 
    <div class="content"> 
    <p>Welcome to some chat system, please</p> 
    <p>provide your first name or alias to start chat.</p> 
    </div> 
    <div class="circle"> 
     <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p> 
    </div> 

    </div> 
</div> 

CSS

.faq_chat { 
     padding-top: 30px; 
     padding-left: 30px; 
     padding-right: 30px; 
     width: 100%; 
     height: 400px; 
     background-color: #d2f1f0; 
     z-index: 99; 
     float: left; 
    } 

    .chat_con { 
     position:relative; 
     float: left; 
     line-height: 0.3; 
     padding: 20px; 
     width: 100%; 
     height: 60px; 
     background-color: #5d3c95; 
     color: white; 
     border-bottom: 2px solid white; 
    } 

    .chat_con p { 
     font-size: 10px; 
    } 
    .fa-comments { 
     font-size: 30px; 
     margin-right: 15px; 
     line-height: 0.6;   
    } 

    .chat_input { 
     width: 100%; 
     height: 50px; 
     background-color: #41c8c2; 
     color: white 
    } 
    .msgicon{ 
     display: block; 
     float: left; 
    } 
    .circle{ 
     position: absolute; 
     right: 15px; 
     top: 25px; 
    } 

Answer 4

私はあなたのCSSを短くするflexible boxを使用しています。

.faq_chat{ 
 
    background: #5d4290; 
 
    color: white; 
 
    padding: 10px 0; 
 
} 
 

 
.chat_con{ 
 
    display: flex; 
 
} 
 

 
.chat_con .fa-comments{ 
 
    font-size:30px; 
 
    padding: 5px 10px 0 20px; 
 
} 
 

 
.chat_con p{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.chat_con .fa-circle{ 
 
    color: red; 
 
} 
 

 
.chat_con .flex-item:last-child { 
 
    margin-left: auto; 
 
    padding: 10px 10px 0 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="faq_chat"> 
 
    <div class="chat_con"> 
 
    
 
    <div class="flex-item"> 
 
     <i class="fa fa-comments" aria-hidden="true"></i> 
 
    </div> 
 
    
 
    <div class="flex-item"> 
 
     <p>Welcome to some chat system, please</p> 
 
     <p>provide your first name or alias to start chat.</p> 
 
    </div> 
 
    
 
    <div class="flex-item"> 
 
     <p>fermé <i class="fa fa-circle" aria-hidden="true"></i></p> 
 
    </div> 
 
    
 
    </div> 
 
</div>