Wie fa icon, p tag und span inline anzeigen?

Question

Ich versuche, ein Chat-Fenster zu erstellen, wie diese

Ich kämpfe mit der rechten Taste sieht, die ich nicht in der gleichen Zeile Höhe des Chat-Symbol platzieren und die p tag .... ich will es schnell und effizient machen, ich weiß, ich könnte einfach alles zu div's tauchen und margen und größe einstellen - aber ich denke vielleicht könnte es einen besseren weg geben. Hier

ist das, was ich bisher getan ...

<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 
    } 

Hier ist meine Fiddle

Answer 1

Nutzen Sie line-height und float Eigenschaft

Änderungen in HTML gemacht

.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>

Link for reference

Dies ist ein Geben Versuchen ..

this helps ..

Answer 2

Sie ein diese geben kann versuchen

<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

Ich benutze flexible box Ihre CSS kürzer zu machen.

.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>