HTML-Text springt aus DIV-Block

Ich baue ein Panel für ein Front-End-System, aber ich habe ein lästiges Problem. Ich bin nicht so gut mit CSS. Dies ist, was passiert:HTML-Text springt aus DIV-Block

Das ist mein HTML-Code ist:

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

auch tun euch Tipps, um es zu machen, so dass die Breite der grünen Box expandiert, so dass der Wert in der grünen Box immer richtig passt.

Quelle

2017-03-21 stef morren

Was ist das Problem? Du hast gezeigt, was passiert, aber das ist nicht klar. Wir können davon ausgehen, aber wir sollten nicht müssen. Machen Sie Ihr Problem klar und erklären Sie, was Sie erwarten. –

Es tut mir leid, dass ich nicht klar war. Ich werde versuchen, in Zukunft klar zu sein. :) –

Ich habe einige wichtige Änderungen an Ihren Codes für erwartete Ergebnisse vorgenommen. Siehe Snippet

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

Quelle

2017-03-21 21:52:05 repzero

Vielen Dank! Das hat mein Problem behoben. –

ticken Sie diese Antwort als lösen, wenn es tatsächlich für Sie funktioniert ... – repzero

Sie sollten erklären, warum Ihre Antwort funktioniert. Während Ihre Antwort sein Problem beheben kann, ist es für das OP oder andere, die sich mit einem ähnlichen Problem konfrontiert sehen, nicht hilfreich. "Lehre einen Mann zum Fischen" ist die Idee. –

HTML-Text springt aus DIV-Block

Antwort

Verwandte Themen