HTML複選框在某些情況下不可點擊

-1

問題是隻有第一行是完全可點擊的。

其他複選框只能在某些地方點擊。

圖片

的其他怪異，當第一擾流板被選中，這是。圖片所有地方都可以完全點擊。

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;

可以採取什麼問題嗎？

來源

2017-09-01 Ruitjes

嘗試使用行類將每個元素包裝在單獨的div中。

.row {寬度：100％;向左飄浮;相對位置; }

然後，你將有每個元素的更好的控制研究這一行，如果它不會幫助你的小解決辦法，並設置位置透明DIV絕對與Z指數，你會得到元素的頂部點擊DIV :)

來源

2017-09-01 13:17:35 Czcibor

哇感謝的人！出於某種原因，我可以對你加註，但+1 – Ruitjes

HTML複選框在某些情況下不可點擊

回答

相關問題