HTML文本跳出DIV块

Question

我正在为前端系统构建一个面板，但是我遇到了一个恼人的问题。 我对CSS不太好。这就是：

这是我的HTML代码：

#main #myTopMenu #iconBar {
  margin-right: 10px;
  float: right;
}

#main #myTopMenu #iconBar a {
  display: inline-block;
  margin-left: 30px;
  color: white;
}

#main #myTopMenu #iconBar .optionsContainer {
  line-height: 55px;
}

#main #myTopMenu #iconBar .optionsContainer img {
  vertical-align: middle;
  position: relative;
}

#main #myTopMenu #iconBar .valueWithOption {
  background-color: #59a632;
  height: 25px;
  width: 35px;
  position: absolute;
  top: 10px;
  margin-left: 27px;
  border-radius: 4px;
}

#main #myTopMenu #iconBar .valueWithOption span {
  background-color: blue;
  width: 100%;
  height: 100%;
}

<div id="iconBar">
  <a href="#">
    <div class="optionsContainer">
      <img src="images/icons/message.png">
      <div class="valueWithOption">
        <span>5</span>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="optionsContainer"><img src="images/icons/bell.png">
      <div class="valueWithOption"><span>5</span></div>
    </div>
  </a>
  <a href="#">
    <div class="optionsContainer"><img src="images/icons/settings.png"></div>
  </a>
</div>

你们也有提示，以便绿色框的宽度扩大，以便绿色框中的值始终适合。

Answer 1

我对您的代码进行了一些重大更改以获得预期结果。请参阅代码段

 #iconBar {
  margin-right: 10px;
  float: right;
}

#iconBar a {
  display: inline-block;
  margin-left: 30px;
  color: white;
}


#iconBar .optionsContainer img {
  vertical-align: middle;
  position: relative;
}

#iconBar .valueWithOption {
  background-color: #59a632;
padding: 5px;
  top: 10px;
  border-radius: 4px;
  position: relative;
top: -10px;
display:inline-block
}

#iconBar .valueWithOption span {
  background-color: blue;
  width: 100%;
  height: 100%;
}

<br>
<br>
<div id="iconBar">
  <a href="#">
    <div class="optionsContainer">
      <img src="images/icons/message.png">
      <div class="valueWithOption">
        <span>5</span>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="optionsContainer"><img src="images/icons/bell.png">
      <div class="valueWithOption"><span>500</span></div>
    </div>
  </a>
  <a href="#">
    <div class="optionsContainer"><img src="images/icons/settings.png"></div>
  </a>
</div>