如何将复选框与字段集中的标签对齐？

Question

这里的新手编码员正在做一个让我发疯的项目。 我已经尝试了所有我能想到的。 我知道它与宽度有关，但我无法弄清楚所有内容是否对齐。 我希望将标签与字段集中的复选框输入对齐并将其居中。 我尝试删除 100% 宽度，使用 flex 显示，将显示更改为内联块，以及其他各种事情，但没有成功 - 非常感谢任何帮助！

    <div class="container">
      <h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
      <p>Please fill out the form below to contact us</p>
      <form action="process.php">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" id="name">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
        </div>

        <div class="form-group">
          <label for="state-select">Choose Your State:</label>
          <select name="state" id="state-select">
            <option value="">Required</option>
            <option value="ct">Connecticut</option>
            <option value="ny">New York</option>
            <option value="ma">Massachusets</option>
            <option value="nh">New Hampshire</option>
            <option value="me">Maine</option>
          </select>
        </div>
</form>

<fieldset>
  <legend>Newsletter</legend>
  <div>
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
  </div>
</fieldset>


      <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message"></textarea>
        <button type="submit" class="btn">Submit</button>
      </div>
  </section>
  </div>

CSS

#contact-form .form-group {
  margin-bottom: 20px;

  }

  #contact-form  {
    display: block;
    margin-bottom: 5px;
  }

  #contact-form input, 
  #contact-form textarea {
  width: 100%;
    padding: 10px;
    border: 1px #ddd solid;
}

#contact-form textarea {
  height: 200px;
}

#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: #12cad6;
}```

Answer 1

向包含标签和复选框的 div 添加一个类

<div class="subscribe-news__container">
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
</div>

.subscribe-news__container {
  display: flex; // this will fix it you may need to add some margin-left to the label
  justify-content: center; // this will center horizontally within the div the page when using flex
  align-items: center; // this will center your items vertically when using flex
}

我还建议研究一些 flex 选项，例如 justify-content 和 align-items。 它们在上面进行了解释。

您还使用 ID 进行了很多选择，我建议您改用类。

类旨在重用，而 ID 则不能。 这也会导致可访问性问题，因为重复的 ID 可能会成为一个问题。

我希望这有帮助：）

我测试过的完整代码。 包含样式标签只是为了能够在我这边快速测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #contact-form .form-group {
            margin-bottom: 20px;

            }

            #contact-form  {
                display: block;
                margin-bottom: 5px;
            }

            #contact-form input, 
            #contact-form textarea {
            width: 100%;
                padding: 10px;
                border: 1px #ddd solid;
        }

        #contact-form textarea {
            height: 200px;
        }

        #contact-form input:focus,
        #contact-form textarea:focus {
            outline: none;
            border-color: #12cad6;
        }
        .subscribe-news__container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="l-heading"><span class="text-primary">Contact</span> | Villa Aviana</h1>
        <p>Please fill out the form below to contact us</p>
        <form action="process.php">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" name="name" id="name">
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" name="email" id="email">
            </div>

            <div class="form-group">
                <label for="state-select">Choose Your State:</label>
                <select name="state" id="state-select">
                    <option value="">Required</option>
                    <option value="ct">Connecticut</option>
                    <option value="ny">New York</option>
                    <option value="ma">Massachusets</option>
                    <option value="nh">New Hampshire</option>
                    <option value="me">Maine</option>
                </select>
            </div>
</form>

<fieldset>
<legend>Newsletter</legend>
<div class="subscribe-news__container">
    <input id="field" type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
    <label for="subscribeNews">Subscribe Me</label>
</div>
</fieldset>


        <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" id="message"></textarea>
            <button type="submit" class="btn">Submit</button>
        </div>
</section>
</div>
</body>
</html>

如何将复选框与字段集中的标签对齐？

问题描述

1 个解决方案

解决方案1
0 2020-02-06 00:14:08

如何将复选框与字段集中的标签对齐？

问题描述

1 个解决方案

解决方案1 0 2020-02-06 00:14:08

解决方案1
0 2020-02-06 00:14:08