在某些情况下，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％;向左飘浮;相对位置; }

然后你将更好地控制这一行中的每个元素，如果它不会帮助你可以解决小问题，并在绝对位置上设置透明div，使用z索引，你将获得元素顶部的可点击div：）