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>