父子外的CSS子div

时间:2013-10-24 12:06:24

标签: css

这是父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会麻烦

1 个答案:

答案 0 :(得分:0)

您已将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