Inner div nicht im Elternteil div bei 100% Breite enthalten

Ich versuche, die NavigationItemdiv innerhalb der Eltern div zu enthalten. Es bricht aus dem Eltern div in meinem Beispiel ausbrechen. Ich weiß, ich könnte einfach overflow: hidden verwenden; aber wenn ich Artikel in diesem div zentriere, tut es nicht center richtig. Weiß jemand was ich falsch mache?Inner div nicht im Elternteil div bei 100% Breite enthalten

.B2_NavigationItem { 
 
    background: #0066a2; 
 
    display: inline-block; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    text-align: left; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationItem2 { 
 
    background: #0c3655; 
 
    display: inline-block; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    text-align: center; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationItem3 { 
 
    background: #dcdcdc; 
 
    display: inline-block; 
 
    border: 0px; 
 
    color: #000000; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationBubble { 
 
    background: #FFFFFF; 
 
    display: inline-block; 
 
    color: #000000; 
 
    width: 90%; 
 
    margin: 0px 0px 4px 0px; 
 
    border: 1px solid #000000; 
 
    border-radius: 6px; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    position: absolute; 
 
    background-color: #dcdcdc; 
 
    width: 260px; 
 
    border: 4px solid #0066a2; 
 
    border-radius: 0px 0px 12px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 4px 0px 0px 0px; 
 
    z-index: 999; 
 
}

<div class="dropdown"> 
 
    <div class="dropdown-content"> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    <div class="B2_NavigationBubble"> 
 
     <div class="B2_NavigationItem2">ITEM</div> 
 
    </div> 
 
    <div class="B2_NavigationBubble"> 
 
     <div class="B2_NavigationItem2">ITEM</div> 
 
    </div> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    </div> 
 
</div>

hier ist der Code auf jsfiddle: https://jsfiddle.net/gt9udvay/

Quelle

2017-10-31 Born2DoubleUp

Sie könnten padding ändern 0px auf der linken Seite zu sein und rechts wie .....

.B2_NavigationItem2 { 
    background: #0c3655; 
    display: inline-block; 
    color: #FFFFFF; 
    font-size: 14px; 
    margin: 0px 0px 4px 0px; 
    text-align: center; 
    padding: 6px 0px; 
    width: 100%; 
}

Quelle

2017-10-31 01:08:58 TacoWilson

Ich bin ein Idiot. Ich dachte ursprünglich, dass es das Padding sein könnte und ich erinnere mich, dass ich versuchte, es zu entfernen. Aber es ragte immer noch ein paar Pixel heraus. Aus irgendeinem Grund schien es mir zu funktionieren, als ich es diesmal tat. Danke vielmals! – Born2DoubleUp

Kein Problem! Kannst du diese Antwort akzeptieren? – TacoWilson

Es ist wegen der padding. Mit einem width von 100% des übergeordneten und der padding macht es breiter als die Breite des übergeordneten Containers. Um das zu beheben, wenden Sie einfach box-sizing: border-box an die divs an.

Sie können mehr über box-sizinghere.

.B2_NavigationItem { 
 
    background: #0066a2; 
 
    display: inline-block; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    text-align: left; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationItem2 { 
 
    background: #0c3655; 
 
    display: inline-block; 
 
    color: #FFFFFF; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    text-align: center; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationItem3 { 
 
    background: #dcdcdc; 
 
    display: inline-block; 
 
    border: 0px; 
 
    color: #000000; 
 
    font-size: 14px; 
 
    margin: 0px 0px 4px 0px; 
 
    padding: 6px; 
 
    width: 100%; 
 
} 
 

 
.B2_NavigationBubble { 
 
    background: #FFFFFF; 
 
    display: inline-block; 
 
    color: #000000; 
 
    width: 90%; 
 
    margin: 0px 0px 4px 0px; 
 
    border: 1px solid #000000; 
 
    border-radius: 6px; 
 
} 
 

 
.dropdown { 
 
    float: left; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    position: absolute; 
 
    background-color: #dcdcdc; 
 
    width: 260px; 
 
    border: 4px solid #0066a2; 
 
    border-radius: 0px 0px 12px 0px; 
 
    margin: 0px 0px 0px 0px; 
 
    padding: 4px 0px 0px 0px; 
 
    z-index: 999; 
 
} 
 

 
.dropdown-content div { 
 
    box-sizing: border-box; /*apply where applicable*/ 
 
}

<div class="dropdown"> 
 
    <div class="dropdown-content"> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    <div class="B2_NavigationBubble"> 
 
     <div class="B2_NavigationItem2">ITEM</div> 
 
    </div> 
 
    <div class="B2_NavigationBubble"> 
 
     <div class="B2_NavigationItem2">ITEM</div> 
 
    </div> 
 
    <div class="B2_NavigationItem">ITEM</div> 
 
    </div> 
 
</div>

Quelle

2017-10-31 01:04:35

Inner div nicht im Elternteil div bei 100% Breite enthalten

Antwort

Verwandte Themen