我是初学者，有一个简单的问题。
如果我在 #container div 内放置一个输入复选框，它可以工作，但如果将它们放入 #container div > #section div ，然后它们不起作用。
*,
html,
body {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
@media only screen and (orientation: portrait) {
#content {
flex-direction: column;
}
}
.section {
width: 33%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#today-tasks,
#upcoming-tasks,
#recurring-tasks {
width: 100%;
height: auto;
}
.task {
width: 100%;
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 8px;
}
/* Text */
.title {
flex: 0;
padding: 4px;
font-size: 4vw;
}
.task-text {
font-size: 6vw;
}
@media only screen and (orientation: landscape) {
.title {
font-size: 3vh;
}
.task-text {
font-size: 6vh;
}
}<body>
<div id="content">
<div class="section" id="today">
<div class="title">
<h4>today</h4>
</div>
<ul id="today-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="upcoming">
<div class="title">
<h4>upcoming</h4>
</div>
<ul id="upcoming-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="recurring">
<div class="title">
<h4>recurring</h4>
</div>
<ul id="recurring-tasks">
<li class="task">
<p class="task-text">task</p>
<!-- <label for="toggle"><input type="checkbox" id="toggle" /></label> -->
<input type="checkbox" />
</li>
</ul>
</div>
</div>最佳答案
有很多没用的height:100%; width:100%;这会导致你的结果有点困惑，所以我只是让你的代码有点整洁。
*,
html,
body {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
flex-wrap: wrap;
}
@media only screen and (orientation: portrait) {
#content {
flex-direction: column;
}
}
.section {
width: 33%;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#today-tasks,
#upcoming-tasks,
#recurring-tasks {
width: 100%;
height: auto;
}
.task {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
padding: 8px;
}
/* Text */
.title {
flex: 0;
padding: 4px;
font-size: 4vw;
}
.task-text {
font-size: 6vw;
padding-right:5px;
}
@media only screen and (orientation: landscape) {
.title {
font-size: 3vh;
}
.task-text {
font-size: 6vh;
}
}<body>
<div id="content">
<div class="section" id="today">
<div class="title">
<h4>today</h4>
</div>
<ul id="today-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="upcoming">
<div class="title">
<h4>upcoming</h4>
</div>
<ul id="upcoming-tasks">
<li class="task">
<p class="task-text">task</p>
<input type="checkbox" />
</li>
</ul>
</div>
<div class="section" id="recurring">
<div class="title">
<h4>recurring</h4>
</div>
<ul id="recurring-tasks">
<li class="task">
<p class="task-text">task</p>
<!-- <label for="toggle"><input type="checkbox" id="toggle" /></label> -->
<input type="checkbox" />
</li>
</ul>
</div>
</div>关于html - 输入复选框在 div 内不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68602206/