Question

如何编辑HTML / CSS以在每个复选框/值配对之间创建间距？现在每个复选框和每个值均匀分布。我希望value1接近checkbox1，但checkbox2与value1有一些距离。

代码在这里：

.checkboxes {
  text-align:center;
}

.checkboxes input{
  margin: 0 20px 0;
}

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One"> One
    <input type="checkbox" name="Two" value="Two"> Two
    <input type="checkbox" name="Three" value="Three"> Three
    <input type="checkbox" name="Four" value="Four"> Four
  </span>
</div>

Answer 1

使用此代码

    .checkboxes {
      text-align:center;
     }

    .checkboxes input{
      margin: 0px 0px 0px 0px;
     }

     .checkboxes label{
       margin: 0px 20px 0px 3px;
     }

<html>
<head>
   </head>
<body>

  <div class="checkboxes">
  <span>
  <input type="checkbox" name="Mow" value="Mow"> <label>One</label>
  <input type="checkbox" name="Weedeat" value="Weedeat"> <label>Two</label>
  <input type="checkbox" name="Edge" value="Edge"> <label>Three</label>
  <input type="checkbox" name="Other" value="Other"> <label>Four</label>
  </span>
  </div>

</body>
</html>

Answer 2

以这种方式使用CSS margin: top left bottom right;

.checkboxes input{
  margin: 0 5px 0 20px;
}

.checkboxes {
  text-align:center;
}

.checkboxes input{
  margin: 0 5px 0 20px;
}

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One"> One
    <input type="checkbox" name="Two" value="Two"> Two
    <input type="checkbox" name="Three" value="Three"> Three
    <input type="checkbox" name="Four" value="Four"> Four
  </span>
</div>

Answer 3

您可以在复选框1中添加ID，然后单独为其编写样式， JSFiddle Code Here

   #chk1 {
      margin :0px !important;
    }

    <div class="checkboxes">
  <span>
    <input type="checkbox" id="chk1" name="Mow" value="Mow"> One
    <input type="checkbox" name="Weedeat" value="Weedeat"> Two
    <input type="checkbox" name="Edge" value="Edge"> Three
    <input type="checkbox" name="Other" value="Other"> Four
  </span>
  </div>

Answer 4

你需要稍微减少右边距，可能需要增加左边距

.checkboxes input{
  margin: 0 5px 0 30px;
}

.checkboxes {
  text-align:center;
}

.checkboxes input{
  margin: 0 5px 0 30px;
}

    <div class="checkboxes">
      <span>
        <input type="checkbox" name="Mow" value="Mow"> One
        <input type="checkbox" name="Weedeat" value="Weedeat"> Two
        <input type="checkbox" name="Edge" value="Edge"> Three
        <input type="checkbox" name="Other" value="Other"> Four
      </span>
      </div>

Answer 5

您目前正在为输入的边距声明三个值。

声明四个，这样你就可以分别定位顶部，左侧，底部和右侧。

.checkboxes {
  text-align: center;
}

.checkboxes input{
  margin: 0 0 0 20px;
}

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One"> One
    <input type="checkbox" name="Two" value="Two"> Two
    <input type="checkbox" name="Three" value="Three"> Three
    <input type="checkbox" name="Four" value="Four"> Four
  </span>
</div>

Answer 6

您在复选框的两侧添加了填充

 /*margin: 0 20px;*/
  margin-left: 40px;

.checkboxes {
  text-align:center;
}

.checkboxes input{
  /*margin: 0 20px;*/
  margin-left: 40px;
}

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One"> One
    <input type="checkbox" name="Two" value="Two"> Two
    <input type="checkbox" name="Three" value="Three"> Three
    <input type="checkbox" name="Four" value="Four"> Four
  </span>
</div>

Answer 7

只需将每个输入及其文本包装在自己的元素中，并为它们提供某种间距：

<div class="checkboxes">
  <span>
    <input type="checkbox" name="One" value="One">
    One    
  </span>
  <span>
    <input type="checkbox" name="Two" value="Two">
    Two
  </span>
  <span>
    <input type="checkbox" name="Three" value="Three">
    Three
  </span>
  <span>
    <input type="checkbox" name="Four" value="Four">
    Four
  </span>
</div>

.checkboxes {
  padding: 10px;
}

span {
  margin-left: 10px;
  margin-right: 10px;
}

https://jsfiddle.net/8to42fz8/5/

此外，您要用于描述输入的文本的内容是label，但纯文本也在这里。

复选框和值之间的间距

7 个答案: