根据内容

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

做这样的事情怎么样

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我更新了我的 CSS ，现在我认为它是自动

保持这个原样

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

.notification .right {
    margin-left: 20%;
    white-space: nowrap;
    margin-left: 5%;
    padding-right: 25px; <---- Added Line
}

现在我明白了