jquery - <li> 的条件 float

Question

我正在构建一个聊天客户端，如果消息来自活跃用户，我想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;
}

Answer 1

那是因为您需要为每个气泡文本在 block 级别进行包装。基本方法是插入一个 li，里面有一个 div.bubble，如果消息来自发件人，它会 float 。

添加应该是这样的:

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 类向右浮动即可。

这是代码的 fiddle https://jsfiddle.net/Robertroid/Lxd78ayf/29/

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

希望对你有帮助