如何使边框与文本一样大

Question

所以它看起来像这样：

这是消息的示例代码：

.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>

我怎样才能使边框与内部文字一样大...我认为填充是可行的，但遗憾的是它不是那么请帮助我。

Answer 1

您可以在容器上使用flexbox：

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

示例：

.allMsg {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
}

.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>
  <p class='self chatMsg'>This is a test</p>
</div>

Answer 2

将消息包装在另一个元素中是可能的。因此，假设所有消息都有一个全宽度元素，但朋友消息将与左侧对齐并具有蓝色背景，而您的消息将与右侧对齐并具有绿色背景。如果您不想更改标记，最简单的方法是将邮件包装在一个范围内，而不是更改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>