如何修复使用 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 选项。

片段

.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>