根据条件左右显示<li>元素

Question

我试着用'li‘标签逐行显示消息，.The的主要目的是在右侧显示我们的消息，而其他在左侧的消息则显示在一个react应用程序中，但问题是，每当我尝试向左浮动或向右浮动时，所有元素都会像下面这样出现在同一条线上

​

​

我的反应聊天样式代码是这个

      {this.state.chats.map(chat => (<div key={chat.timestamp}>
        {this.state.user.uid === chat.uid  ?(
       <li className=" self" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'right',display:'inline-block',
            backgroundColor:"whitesmoke",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
            borderBottomRightRadius:11+'px',borderTopLeftRadius:11+'px'}}>

                <div className="message text-dark">{chat.content} </div>
        </li>
            
          ):(
                <li className="other" style={{listStyleType:"none",overflow:'hidden',marginLeft: 2 +'px',float:'left',display:'inline-block',
            backgroundColor:"blanchedalmond",margin:2 + "em",padding:13+'px',width:'max-content',borderBottomLeftRadius:11+'px',
            borderBottomRightRadius:11+'px',borderTopRightRadius:11+'px'}}>
          
                 <div className="message text-dark">{chat.content}</div>
            
            </li>
            
          )}
        </div>
        ))}

编辑!：浮动个人div后

​

​

Answer 1

​

.self {
  background: orange;
  float: right;
  clear: both;
}

.other {
  background: blue;
  float: left;
  clear: both;
}

<ul>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="self">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="other">message</li>
  <li class="self">message</li>
</ul>

​

https://developer.mozilla.org/en-US/docs/Web/CSS/clear检查浮动元素的清除属性。

Answer 2

Flexbox解决方案：

​

.left {
  display: flex;
  justify-content: flex-start;
}

.right {
  display: flex;
  justify-content: flex-end;
}

<ul>
  <li class="left">
    Others message
  </li>
  <li class="right">
    Your message
  </li>
</ul>

​

解决方案2

尝试<li>占据整条线，并将float: left/right放到内部<div>中

类似于：https://jsfiddle.net/L1g6wx34/

​

.left {
  float: left;
}

.right {
  float: right;
}

<ul>
  <li>
    <div class="left">
      Others message
    </div>
  </li>
  <li>
    <div class="right">
      Your message
    </div>
  </li>
  <li>
    <div class="right">
      Your message
    </div>
  </li>
</ul>

​