問題與CSS，HTML和背景顏色。

我有兩組複選框，每個都有一個標題。該標題應該具有灰色背景，然後複選框區域在背景中應該沒有顏色。

問題是，如果我只將一組複選框與其標題放在一起，背景效果很好。

但是，當我把第二組複選框，第一組的複選框區域有灰色背景，似乎是繼承第二組的標題BG。

這是代碼。任何線索？

謝謝！

<div class="bgFilterTitles"> 
    <h1 class="filterTitles">COLOR</h1> 
</div> 
<div class="boxes"> 
<?php 
    $colors = $con -> prepare("SELECT DISTINCT color_base1 FROM item_descr ORDER BY color_base1 ASC"); 
    $colors ->execute(); 
    while ($colorBoxes = $colors->fetch(PDO::FETCH_ASSOC)) 
    { 
    echo "<input type='checkbox' class='regularCheckbox' name='color' value='".$colorBoxes[color_base1]."' /><font class='similarItemsText'> ".$colorBoxes[color_base1]."</font><br />"; 
    } 
?> 
</div> 


<div class="bgFilterTitles"> 
    <h1 class="filterTitles">PRICE</h1> 
</div> 
<div class="boxes"> 
<?php 
    $prices = $con -> prepare("SELECT DISTINCT price FROM item_descr ORDER BY price ASC"); 
    $prices ->execute(); 
    while ($priceSort = $prices->fetch(PDO::FETCH_ASSOC)) 
    { 
     echo "<input type='checkbox' class='regularCheckbox' name='price' value='".$priceSort[price]."' /><font class='similarItemsText'> ".$priceSort[price]."</font><br />"; 
    } 
?> 
</div>

下面是使用CSSS：

.boxes { 
    width: 160px; 
    float: left; 
    padding: 10px; 
    border: 1px solid #C6C6C6; 
    clear: both; 
} 
.filterTitles 
{ 
    background-color: #F1F1F1; 
    font-family: Arial,Helvetica,Verdana,Sans-serif; 
    font-size: 11px; 
    font-weight: normal; 
    color: #333; 
    text-transform: uppercase; 
    padding: 4px; 
    border: 1px; 
    border-color: #C6C6C6; 
    border-top-style: dotted; 
}

來源

2012-12-16 samyb8

任何機會，你可以重新使用jsfiddle.net這個問題？ –

我不知道如果我理解正確的問題，請問這是什麼你想幹什麼？

http://jsfiddle.net/mdLVG/

在這種情況下，你需要添加clear:both;您.filterTitles CSS類。

來源

2012-12-16 16:49:46

問題與CSS，HTML和背景顏色。

回答

相關問題