HTMLチェックボックスをクリックできない場合があります

Question

入力としてチェックボックスを使用するスポイラーを作成していました。

この問題は、最初の行だけが完全にクリック可能であることです。

その他のチェックボックスは、一部の場所でのみクリック可能です。最初のスポイラーがチェックされているときに、この

ピクチャー

他の奇妙です。 画像 すべての場所を再度完全にクリック可能です。

HTML/PHP

<div class="maasduin-container"> 
    <input type="checkbox" id="spoiler" /> 
    <label for="spoiler" >Appartementen</label> 
    <div class="spoiler"> 
    <?php 
       foreach($hotels as $key => $hotel) 
       { 
        ?> 
        <?php if ($hotel['MaasduinCategory'] == 'Appartementen'): ?> 
          <div class="products"> 
           <div class="maasduin-foto"><img style="width: 136px; height: 134px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>"> 
            <?php if ($hotel['MaasduinPas'] == '1'): ?> 
             <div class="maasduin-actiefoto"> 
              <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>"> 
             </div> 
            <?php endif ?> 
           </div> 
           <div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div> 
           <div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div> 
           <div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div> 
           <div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div> 
           <div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>      
         </div> 
        <?php endif ?> 

        <?php 
       } 
        ?>  
        <input type="checkbox" id="spoiler" /> 
        </div> 



    <input type="checkbox" id="spoiler2" /> 
    <label for="spoiler2" >Bed and Breakfast</label> 
    <div class="spoiler"> 
    <?php 
       foreach($hotels as $key => $hotel) 
       { 
        ?> 
        <?php if ($hotel['MaasduinCategory'] == 'Bed and Breakfast'): ?> 
          <div class="products"> 
           <div class="maasduin-foto"><img style="width: 136px; height: 134px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinImage']; ?>"> 
            <?php if ($hotel['MaasduinPas'] == '1'): ?> 
             <div class="maasduin-actiefoto"> 
              <img style="width: 40px; height: 40px;" src="\Maasduinen-NW\image\<?php echo $hotel['MaasduinPasfoto']; ?>"> 
             </div> 
            <?php endif ?> 
           </div> 
           <div class="maasduin-naam"><?php echo $hotel['MaasduinNaam']; ?></h3></div> 
           <div class="maasduin-locatie"><?php echo $hotel['MaasduinLocatie']; ?></div> 
           <div class="maasduin-email"><?php echo $hotel['MaasduinEmail']; ?></div> 
           <div class="maasduin-telefoon"><?php echo $hotel['MaasduinTelefoon']; ?></div> 
           <div class="maasduin-website"><?php echo $hotel['MaasduinWebsite']; ?></div>      
         </div> 
        <?php endif ?> 

        <?php 
       } 
        ?>  
        <input type="checkbox" id="spoiler2" /> 
       </div> 

はCSS

input[id^="spoiler"]{ 
display: none; 
} 
input[id^="spoiler"] + label { 
    display: block; 
    width: 1000px; 
    margin: 0 auto; 
    padding: 5px 20px; 
    background: #22CF00; 
    color: #fff; 
    text-align: center; 
    font-size: 20px; 
    cursor: pointer; 
    transition: all .3s; 
} 
input[id^="spoiler"]:checked + label { 
    color: black; 
    background: #0EC100; 
} 
input[id^="spoiler"] ~ .spoiler { 
    height: 0; 
    overflow: hidden; 
    opacity: 0; 
    background: #ffffff; 
    border: 1px solid #ccc; 
} 
input[id^="spoiler"]:checked + label + .spoiler{ 
    height: auto; 
    opacity: 1; 

何が問題になることができますか？

Answer 1

各要素を行クラスで別のdivに折り返してみます。

.row {幅：100％;フロート：左;相対的な位置; }

次に、この行の各要素をよりよく制御できるようになります。ちょっとした回避策があり、絶対位置とZインデックスで透過divを設定すると、要素の上にclickable divが表示されます。