jquery - <li>的条件浮点数

我正在构建一个聊天客户端，如果消息是来自活动用户，则要float-right，然后从另一个最终用户收到消息时，要float-left。我尝试在CSS本身中添加float:right，但是这样做时，列表项变为水平而不是垂直。

的JavaScript

if (user.id === msgsender.id) {
    $("#messages").append($("<div class= bubble-r><li>/div>").text(msg));
} else {
    $("#messages").append($("<div class=bubble><li></div>").text(msg));
}
function render() {
    return (
      <div>
        <ul id="messages">
          <div />
        </ul>
      </div>
    );
  }

的CSS

.bubble-r {
  overflow-x: hidden;

  align-items: flex-end;
  position: relative;
  background: #0072c6;
  max-width: 100px;
  padding: 5px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  color: white;
  border-radius: 6px;
}

.bubble {
  overflow-x: hidden;
  position: relative;
  background: #cad5d7;
  max-width: 100px;
  padding: 5px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}
ul {
  padding: 0px;
  margin: 4px;
}

最佳答案

那是因为您需要为每个气泡文本在块级别上包装一个包装。基本的方法是插入li，如果消息来自发件人，则内部会有一个div.bubble浮动。

添加将是这样的：

function addMessage(user, msg) {
    var $li = $("<li></li>");
    var $div = $("<div/>")
      .addClass("bubble")
      .text(msg)
      .toggleClass("bubble-sender", user.id === msgsender.id) //If sender, it will add "bubble-sender" class
      .appendTo($li);
    $li.appendTo("#messages");
}

然后，仅使.bubble-sender类浮动即可。

这是摆弄代码
https://jsfiddle.net/Robertroid/Lxd78ayf/29/

还修复了一些问题，例如冗余的CSS（两个气泡都有一个.bubble类，用于共享样式），将ul更改为ol（这是有道理的，因为聊天文本是按到达顺序排序的），而li是直接的ol的子级。

希望能帮助到你