html - 输入复选框在 div 中不可点击
问题描述
我是初学者,有一个简单的问题。
如果我在里面放置一个输入复选框#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>
推荐阅读
- scala - 执行 dropDuplicates() 后,计数时得到不同的计数
- android - 在我的动画列表中颤动改变图标 onTap
- java - 使用新创建的项目返回到以前的活动时更新 recyclerView 适配器
- jquery - 带有 setTimeout 的 jQuery 函数动画运行一次
- android - 如何在新平台重新提交应用以供审核?
- c# - Umbraco - 从文本而不是 nodeId 获取内容
- python-3.x - 有没有办法打开一个封闭的 Image 对象?
- java - 获取二叉树特定级别的所有节点
- javascript - 我的待办事项列表 Javascript 代码不会将我想要的样式存储在数组中
- html - 此自定义 HTML 代码的联系表单字段