容器中元素之间的空格[重复]

Question

所以我有一个带有标签文本和复选框的容器，现在这是我目前拥有的

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  display: flex;
  width: 200px;
  height: fit-content;
  margin: 0 10px;
  justify-content: space-around;
}

.container.firstCheck{
  flex-grow: 1;
}
.container.secondCheck{
  flex-grow: 1;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

现在我希望标签位于容器的最左侧，复选框位于容器的最右侧使用 flexbox。这说明了我的目标 .

PS：如果可能的话，我也希望能够减少 html标签。

Answer 1

使用justify-content: space-between 将项目放置在容器的左侧和右侧。 此外，您需要更正 CSS 中的 SecondCheck 名称。在HTML 结构中，它有大写​​“S”，而在CSS 中，它有小“s”。 我已经在我的回答中更正了。 希望对您有所帮助，谢谢！！

body {
  display: flex;
  justify-content: center;
}
.container {
    background-color: #fff;
    display: flex;
    width: 200px;
    height: fit-content;
    margin: 0 10px;
    justify-content: space-around;
    border:2px solid #000;
 }

.container.firstCheck{
  flex-grow: 1;
}

.container.SecondCheck{
  flex-grow: 1;
}

.firstCheck{
    margin-bottom: 20px;
}

.checkboxes{
    width: 100%;
    display: inline-block;
    padding: 20px;
}
.firstCheck, .SecondCheck{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

Answer 2

在.firstCheck, 和.SecondCheck 上使用flex，然后在input 上设置margin-left: auto。我删除了一些无用的代码，请在下面查看：

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  height: 150px;
  margin: 0 10px;
  align-items: center;
  justify-content: center;
  display: flex;
}

.checkboxes {
    width: 100%;
    padding: 10px;
}

.firstCheck input, .SecondCheck input {
    margin-left: auto;
}

.firstCheck, .SecondCheck {
    display: flex;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox" />
    </div>
    <div class="SecondCheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox" />
    </div>
  </div>
</div>

Answer 3

您需要将flex 属性应用于您要定位的元素，如下所示：

body {
  display: flex;
  justify-content: center;
  width: 100%;
}

.container {
  background-color: yellow;
  display: flex;
  width: 200px;
  height: fit-content;
  margin: 0 10px;
  /*       justify-content: space-around; */
}

.checkboxes {
  width: 100%;
}

.firstCheck {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  width: 100%;
}

.secondCheck{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  width: 100%;
}

.firstLabel {
  display: flex;
  flex-direction: row;
}

.secondLabel {
  display: flex;
  flex-direction: row;
}

<div class="container">
  <div class="checkboxes">
    <div class="firstCheck">
      <label class="firstLabel" for="check1">this is 1</label>
      <input class="firstInput" name="check1" type="checkbox"/>
    </div>
    <div class="secondCheck">
      <label class="secondLabel" for="check2">this is 2</label>
      <input class="secondInput" name="check2" type="checkbox"/>
    </div>
  </div>
</div>

Answer 4

这可以按如下方式完成：

body {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 200px;
  height: 140px;  
  border: solid 2px #ccc;
}

.divcheck {
  display: flex;
  justify-content: space-between;
  margin: 0px 20px 0px 20px;
}

<div class="container">
    <div class="divcheck">
      <label for="check1">this is 1</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="divcheck">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
</div>

Answer 5

最小解

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  border: 2px solid black;
  padding: 10px;
}

.checkbox {
  display: flex;
  justify-content: space-around;
  padding: 5px;
}

<div class="container">
  <div class="checkbox">
    <label for="check1">this is 1</label>
    <input name="check1" type="checkbox" />
  </div>
  <div class="checkbox">
    <label for="check2">this is 2</label>
    <input name="check2" type="checkbox" />
  </div>
</div>

Answer 6

如果你想要更少的 div，你可以使用网格

.parent {
  display: grid;
  width: 200px;
  grid-template-columns: 50% 50%;
  grid-auto-rows: 50px;
  align-items: center;
  justify-items: center;
}
.child {
  margin: 0 10px;
}

<div class="parent">
      <div class="child">label</div>
      <div class="child"><input type="checkbox" /></div>
      <div class="child">label</div>
      <div class="child"><input type="checkbox" /></div>
    </div>

Answer 7

首先，容器从您的空间周围应用的 css 中有一些填充，您必须删除这些填充，以便为第一个和第二个检查 div 创建一些空间。您实际上并不需要容器 div 的 display flex。

您实际上应该设置两个检查 position: relative; 并使用 position: absolute; 和 right: 0px; 将复选框向右移动

您可以通过将 firstCheck 和 secondCheck 替换为简单的 .check 类或任何您想要的类来减少类的数量。您可以使用 :nth-of-type(n) 单独设置它们的样式，而无需为它们中的每一个分配类或 id。

HTML

<div class="container">
  <div class="checkboxes">
    <div class="check">
      <label for="check1">this is the first and longer label spread on 2 rows</label>
      <input name="check1" type="checkbox"/>
    </div>
    <div class="check">
      <label for="check2">this is 2</label>
      <input name="check2" type="checkbox"/>
    </div>
  </div>
</div>

CSS

body {
  display: flex;
  justify-content: center;
}

.container {
  background-color: yellow;
  width: 200px;
  padding: 10px 60px 10px 30px;
  margin: 0 10px;
}

.checkboxes { 
  width: 100%;
}
.checkboxes .check {
  position: relative;
}

.checkboxes .check input {
  position: absolute;
  top: 0px; /* the checkbox is normally positioned at the end of the last row of a label, this positions it in line with the first one */
  right: -30px; /* just to make sure the label wont be too close to the checkbox */

}

这里有一个 codePen 供您查看它是如何工作的：https://codepen.io/ialexandru/pen/YzPvGPR