时间戳

首页 > 解决方案 > 试图弄清楚如何对齐聊天机器人发送的所有文本

javascript - 试图弄清楚如何对齐聊天机器人发送的所有文本

问题描述

目前，如果聊天机器人发送的回复超过一行，则文本未完全对齐。有什么简单的解决方法吗？谢谢

.botText{
vertical-align: middle;
font-family: sans-serif;
font-size:14px;
text-align: left;
line-height:25px;
color: rgb(109,111,109);

}

 <script>
    
function getUserResponse(){
var userText = $('#textInput').val();  

if(userText.trim().length == 0){
    return
}else{
    var userHTML = "<div > <p class='userText'><span>"+userText+"&nbsp;&nbsp;&nbsp;&nbsp;</span> <img src= {% static 'images/userIcon.png' %} width=50px height=50px style='vertical-align: middle;' >&nbsp;&nbsp;&nbsp;&nbsp; </p></div>";
    
    
$('#textInput').val("");

$('#chatbot').append(userHTML);

$.get('/chatbotModel/getResponse',{userMessage:userText}).done(function(data){
    var returnedMessage = "<p class='botText'>&nbsp;&nbsp;&nbsp;&nbsp;<img src= {% static 'images/chatbot.png' %} width=50px height=50px  style='vertical-align: middle;' >&nbsp;&nbsp;&nbsp;&nbsp; <span>"+data+"</span/></p>";
    $('#chatbot').append(returnedMessage)

})

}

文本输出的图像

编辑：HTML代码：

<div>
   
    <div id="chatbot">
        <p class="botText"><span></span></p>
      
    </div>
    <div id="userInput">
    <input type="text" class="no_outline" id="textInput" name="userMessage" placeholder="Type your message..."/>
    <a href="#" class="btn" id="buttonInput">Send</a>
   
    </div>
</div>

聊天机器人 CSS 代码

#chatbot{
margin-left: auto;
margin-right: auto;

margin-top: 70px;
border-radius: 10px;
box-shadow: -1px 4px #d4d4d4;
padding: 10px;
background-color: #ffffff;

}

标签： javascripthtmlcss

解决方案

你有

<p>
   <img>
   <span>...</span>
</p>

但你可能想要更像

<div>
   <div><img></div>
   <div>...</div>
</div>

外部 div 设置为将内容并排放置的位置。请参阅此处的示例：https ://developer.mozilla.org/en-US/docs/Web/CSS/columns

老式的桌子也可以。

推荐阅读