css - 根据内容设置自动宽度

Question

我使用以下 CSS 代码创建了以下通知:

长

短

CSS

.notifications {
    position: fixed;
    z-index: 800;
    width: 20%;
    padding: 10px;
}

---

我正在尝试根据其中的文本/内容为其设置自动宽度

这是我目前尝试过的尝试:

CSS

.notifications {
    position: fixed;
    z-index: 800;
    width: auto;
    padding: 10px;
}

.notification .right {
    margin-left: 20%;
    white-space: nowrap;
    margin-left: 5%;
}

结果:

Answer 1

做这样的事情怎么样

.notifications {
    position: fixed;
    z-index: 800;
}

.notification .message {
  display: inline-block;
  border-radius: 5px;
  background: black;
  padding: 5px 10px;
  color: white;
}

.notification .message:before {
  content: ' ';
  display: inline-block;
  margin: 2px 5px 0 0;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: lime;
}

<div class="notification"> 
  <div class="message"> 
    Hello
  </div>
</div>
<div class="notification"> 
  <div class="message"> 
    Hello, I'm much longer
  </div>
</div>