CSS ребенок DIVS вне родительского

Question

Это родительский DIV:

.navi { 
    width: 400px; 
    height: 30px; 
    float: right; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
    overflow: hidden; 
} 

И это ребенок дивы внутри:

.aktuelleseite { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
    text-align: center; 
    color: white; 
    background-color: #404040; 
} 

.blatt { 
    display: inline-block; 
    width: 19px; 
    height: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
    text-align: center; 
    color: #404040; 
    text-decoration: none; 
} 

Они падают из родительского DIV, как я могу сделать они всегда остаются внутри?

Это часть function.php

if(!in_array(1,$blaetter) AND count($blaetter) > 1) 
     { 
     if(!in_array(2,$blaetter)) { echo '<a href="http://www.stylechica.de/hosen/' . $navi . '" class="blatt">1</a>...'; } 
     else { echo '<a href="http://www.stylechica.de/hosen/' . $navi . '">1</a>'; } 
     } 

    foreach($blaetter AS $blatt) 
     { 
     if($blatt == $seite) { echo '<div class="aktuelleseite">' . $blatt . '</div>'; } 
     else { echo '<a href="http://www.stylechica.de/hosen/' . $navi . 'seite-' . $blatt . '/" class="blatt">' . $blatt . '</a>'; } 
     } 

    if(!in_array($maxseite,$blaetter) AND count($blaetter) > 1) 
     { 
     if(!in_array(($maxseite-1),$blaetter)) { echo '...<a href="http://www.stylechica.de/hosen/' . $navi . 'seite-' . $maxseite . '/" class="blatt">' . $maxseite . '</a>'; } 
     else { echo '<a href="http://www.stylechica.de/hosen/' . $navi . 'seite-' . $maxseite . '/" class="blatt">' . $maxseite . '</a>'; } 
     } 

    } 
?> </div> 

Я называю это с:

<?php 
$wieviele_seiten = $json_output["ProductsSummary"]["TotalPages"]; 
$navi = blaetterfunktion($seite, $wieviele_seiten); 
echo $navi; 
?> 

Вы можете видеть, что он приведет сюда: www.stylechica.de/hosen если он не loeads jus перезагрузите его, иногда API вызывает проблемы

Answer 1

Вы установили width в элементы для детей. Попробуйте:

.aktuelleseite { 
    display: inline-block; 
    height: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
    text-align: center; 
    color: white; 
    background-color: #404040; 
} 

.blatt { 
    display: inline-block;  
    height: 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #C0C0C0; 
    text-align: center; 
    color: #404040; 
    text-decoration: none; 
} 

Try it in fiddle