如何修复使用 input:checked 的 CSS/HTML,以防止单选按钮移动?
How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?
我使用示例 CSS + HTML 代码创建了一系列 "page covers",这些 "page covers" 可选择作为重新设计的单选按钮。一切都很好,除了当我点击一些 "covers" 时,它下面的行一直在移动而不是静止的。我该如何解决这个问题以阻止盖子移动?请看例子。
运行 例子
一定要 运行 使用 Full Page
选项。
- 单击 "cover" 1、2、3 等
- 观察您单击的封面下方的移动行 - 它会移动并自行安排在单击的封面之后
- 预期行为:None 个封面将移动位置,无论您单击哪个封面。
片段
.center {
text-align: center
}
.cover_width {
width: 200px
}
label>input+img {
/* IMAGE STYLES */
cursor: pointer;
border: 3px solid transparent;
}
label>input:checked+img {
/* (CHECKED) IMAGE STYLES */
box-shadow: 0 0 50px green;
border: 1px solid grey;
margin-bottom: 18px;
margin-left: 6px;
}
<form>
<div style="text-align:left">
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
</div>
</form>
当 checked
时不要更改边框大小和边距
.center {
text-align: center
}
.cover_width {
width: 200px
}
label>input+img {
/* IMAGE STYLES */
cursor: pointer;
border: 1px solid transparent;
margin-bottom: 18px;
margin-left: 6px;
}
label>input:checked+img {
/* (CHECKED) IMAGE STYLES */
box-shadow: 0 0 50px green;
border: 1px solid grey;
}
<form>
<div style="text-align:left">
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
</div>
</form>
我使用示例 CSS + HTML 代码创建了一系列 "page covers",这些 "page covers" 可选择作为重新设计的单选按钮。一切都很好,除了当我点击一些 "covers" 时,它下面的行一直在移动而不是静止的。我该如何解决这个问题以阻止盖子移动?请看例子。
运行 例子
一定要 运行 使用 Full Page
选项。
- 单击 "cover" 1、2、3 等
- 观察您单击的封面下方的移动行 - 它会移动并自行安排在单击的封面之后
- 预期行为:None 个封面将移动位置,无论您单击哪个封面。
片段
.center {
text-align: center
}
.cover_width {
width: 200px
}
label>input+img {
/* IMAGE STYLES */
cursor: pointer;
border: 3px solid transparent;
}
label>input:checked+img {
/* (CHECKED) IMAGE STYLES */
box-shadow: 0 0 50px green;
border: 1px solid grey;
margin-bottom: 18px;
margin-left: 6px;
}
<form>
<div style="text-align:left">
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
</div>
</form>
当 checked
.center {
text-align: center
}
.cover_width {
width: 200px
}
label>input+img {
/* IMAGE STYLES */
cursor: pointer;
border: 1px solid transparent;
margin-bottom: 18px;
margin-left: 6px;
}
label>input:checked+img {
/* (CHECKED) IMAGE STYLES */
box-shadow: 0 0 50px green;
border: 1px solid grey;
}
<form>
<div style="text-align:left">
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
<label style="float:left" class='cover_width center'>
<input type="radio" name="coverpage" value="coverpage" style="display:none;">
<img src="http://i.stack.imgur.com/pEYzw.png">
<br>Original Cover</label>
</div>
</form>