我是一个初学者，有一个简单的问题。
如果我将输入复选框放在#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>