Question

我正在聊天，我想将发送消息的人的姓名放在消息框的顶部，就像在Messenger应用程序中一样，如何使用CSS做到这一点？我认为我需要使用标签来执行此操作，对吗？但是如何将其放置在那里

我想要的示例

https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.eztalks.com%2Fhow-to%2Fhow-to-create-a-group-chat-on-iphone.html&psig=AOvVaw04t4JpfAA_3deVRxyTxLqG&ust=1601512477552000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCND10IbRj-wCFQAAAAAdAAAAABAI

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul{
  list-style: none;
  margin: 0;
  padding: 0;
} */

ul li{
  display:inline-block;
  clear: both;
  padding: 10px;
  border-radius: 30px;
  margin-bottom: 2px;
  font-family: Helvetica, Arial, sans-serif;
}

.him{
  background: #eee;
  float: left;
}

.me{
  float: right;
  background: #0084ff;
  color: #fff;
}

.him + .me{
  border-bottom-right-radius: 5px;
}

.me + .me{
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.me:last-of-type {
  border-bottom-right-radius: 25px;
}
    </style>
</head>
<body>
    <ul>
        <li class="him"><span>Hello World</span></li>
        <li class="me"><span>Hello World 2</span></li>
        <li class="me"><span>Hello World 3</span></li>
        <li class="me"><span>Hello World 4</span></li>
        <li class="me"><span>Hello World 5</span></li>
        <li class="me"><span>Hello World 6</span></li>

       </ul>
</body>
</html>

如何在消息提示框上放置文本

0 个答案: