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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使复选框与字段集中的标签对齐？相关的知识，希望对你有一定的参考价值。

[新手程序员在这里从事的项目使我发疯。我已经尝试了所有我能想到的。我知道这与宽度有关，但我无法弄清楚宽度是否对齐。我希望将标签与字段集中的复选框输入对齐，并使其居中。我尝试使用Flex显示器移除100％的宽度，将显示器更改为内联块，以及其他各种方法，但均未成功-非常感谢您的帮助！ 

    <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;
```
答案

向包含标签和复选框的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

我还建议研究一些弹性选项，例如辩解内容和对齐项目。它们在上面解释过。

您还将使用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;
        
    </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>
    <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>

以上是关于如何使复选框与字段集中的标签对齐？的主要内容，如果未能解决你的问题，请参考以下文章

垂直对齐复选框标签？ [复制]

如何将 CheckBox 与其内容对齐？

如何对齐复选框和标签标签？ [复制]

将复选框与标签对齐

如何使 ASP CheckBoxList 标签与复选框保持在同一行

将标签与输入/复选框/收音机对齐