html - 如何使边框和文本一样大

所以看起来像这样：

这是消息的示例代码：

.allMsg {
  width: 100%;
}

.self {
  border-radius: 1rem;
  background-color: #28a745;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.friend {
  text-align: left;
}

#chatWith {
  text-align: center;
  font-family: sans-serif;
  font-size: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

<div class='allMsg'>
  <p class='self chatMsg'>Hello</p>
</div>

我怎么能使边框和里面的文字一样大...我以为填充会起作用，但不幸的是它没有起作用，所以请帮助我。

最佳答案

如果将消息包装在另一个元素中，则是可能的。因此，假设所有邮件都具有全角元素，但朋友邮件将向左对齐并具有蓝色背景，而您的邮件将向右对齐并具有绿色背景。如果您不想太大地更改标记，最简单的方法是将邮件包装在一个范围内，而不需要在html中进行任何其他更改。

.allMsg {
  width: 100%;
}

.self span, .friend span {
  border-radius: 1rem;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 5px;
  margin-right: 5px;
}

.self span {
  background-color: #28a745;
}

.friend span {
  background-color: #2845a7;
}

.self {
  text-align: right;
}

.friend {
  text-align: left;
}

<div class='allMsg'>
  <p class='chatMsg friend'>
    <span>hello</span>
  </p>
  <p class='chatMsg self'>
    <span>hy</span>
  </p>
  <p class='chatMsg friend'>
    <span>how are you friend?</span>
  </p>
  <p class='chatMsg self'>
    <span>i'm fine thanks</span>
  </p>
</div>

关于html - 如何使边框和文本一样大，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48080870/