代码之家  ›  专栏  ›  技术社区  ›  Charlie

为什么我的复选框和单选按钮的间距很奇怪?

  •  1
  • Charlie  · 技术社区  · 9 月前

    我刚刚开始学习HTML和CSS(通过freeCodeCamp),并正在努力完成我的第一个认证项目:构建一个调查表。一切进展顺利,我需要添加复选框和单选按钮。可点击的框/按钮和相应的标签之间有很大的空间,我无法让所有这些内容都集中在左边。

    我尝试了不同的边距和填充值,以及文本对齐和显示选项。它曾希望我最终会得到这样的结果:

    My pronouns are: [] she/her 
                     [] he/him
                     [] they/them
    
    Choose one: () Yes
                () No
                () Maybe
    

    然而,它看起来真的很乱,我没有尝试过改变它的显示方式。 这就是现在的样子:

    My pronouns are:          []          she/her 
                     []          he/him
                     []          they/them
    
    Choose one:           ()          Yes
                ()          No
                ()          Maybe
    

    我的代码:

    body {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: Futura;
    }
    
    fieldset {
    margin-top: 20px;
    background-color: pink;
    width: 70%;
    border: 3px solid #ffffff;
    border-radius: 5px;
    }
    
    legend {
    background-color: grey;
    color: #ffffff;
    border: solid;
    border-radius: 10px;
    padding: 2px 5px;
    }
    
    input {
    width: 50%;
    background-color: #ffffff;
    color: grey;
    margin: 5px;
    font-family: Futura;
    } 
    
    input[type=submit], input[type=reset] {
    background-color: skyblue;
    color: #000000;
    width: 25%;
    margin-top: 15px;
    }
    
    .textarea {
      font-family: Futura;
      color: grey;
      font-size: 14px;
    }
    <fieldset>
      <legend>Checkbox area</legend>
      <div>
        My pronouns are:
        <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
        <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
        <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
        <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
        <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
      </div>
    </fieldset>
    2 回复  |  直到 9 月前
        1
  •  1
  •   Akash    9 月前

    只需添加父类 flex 并将标签和输入包装在一个公共div中。

    body {
    background-color: #000000;
    color: #ffffff;
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: Futura;
    }
    
    fieldset {
    margin-top: 20px;
    background-color: pink;
    width: 70%;
    border: 3px solid #ffffff;
    border-radius: 5px;
    }
    
    legend {
    background-color: grey;
    color: #ffffff;
    border: solid;
    border-radius: 10px;
    padding: 2px 5px;
    }
    
    input {
    width: auto;
    background-color: #ffffff;
    color: grey;
    margin: 5px;
    font-family: Futura;
    } 
    
    input[type=submit], input[type=reset] {
    background-color: skyblue;
    color: #000000;
    width: 25%;
    margin-top: 15px;
    }
    
    .textarea {
      font-family: Futura;
      color: grey;
      font-size: 14px;
    }
    .flex {
        display: flex;
        margin-bottom: 20px;
    }
    <fieldset>
      <legend>Checkbox area</legend>
      <div class="flex">
        My pronouns are:
        <div class="clust">
          <div class="ch-wrap">
              <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
          </div>
          <div class="ch-wrap">
              <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
          </div>
          <div class="ch-wrap">
              <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
          </div>
          </div>
      </div>
      <div class="flex">
        Choose One
          <div class="radio">
            <div class="ch-wrap">
              <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
            </div>
            <div class="ch-wrap">
              <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
            </div>
            <div class="ch-wrap">
              <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
            </div>
          </div>
       </div>
    </fieldset>
        2
  •  0
  •   Antonija Å imić    9 月前

    我不知道你所说的奇怪间距到底是什么意思,但我的尝试是这样的。

    <fieldset>
      <legend>Checkbox area</legend>
      <p>My pronouns are:</p>
    
      <div>
        <input type="checkbox" id="option1" name="option1" value="she/her"><label for="option1">she/her</label>
        <input type="checkbox" id="option2" name="option2" value="he/him"><label for="option2">he/him</label>
        <input type="checkbox" id="option3" name="option3" value="they/them"><label for="option3">they/them</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="yes-no-maybe" value="yes" checked> Yes</label>
        <label><input type="radio" name="yes-no-maybe" value="no"> No</label>
        <label><input type="radio" name="yes-no-maybe" value="maybe"> Maybe</label>
      </div>
    </fieldset>
    

    CSS

    body {
      background-color: #000000;
      color: #ffffff;
      width: 100%;
      height: 100vh;
      margin: 0;
      font-family: Futura;
    }
    
    fieldset {
      margin-top: 20px;
      background-color: pink;
      width: 70%;
      border: 3px solid #ffffff;
      border-radius: 5px;
    }
    
    legend {
      background-color: grey;
      color: #ffffff;
      border: solid;
      border-radius: 10px;
      padding: 2px 5px;
    }
    
    input {
      background-color: #ffffff;
      color: grey;
      margin: 5px;
      font-family: Futura;
    }
    
    input[type="submit"],
    input[type="reset"] {
      background-color: skyblue;
      color: #000000;
      width: 25%;
      margin-top: 15px;
    }
    
    .textarea {
      font-family: Futura;
      color: grey;
      font-size: 14px;
    }
    

    Demo

    另外,你为什么不使用flexbox或grid呢?你想实现什么样的布局?