Как выровнять флажок с меткой внутри набора полей? - PullRequest
Новая
       0

Как выровнять флажок с меткой внутри набора полей?

1 голос
/ 06 февраля 2020

Newb ie кодер здесь работает над проектом, который делает меня безумным. Я перепробовал все, что мог придумать. Я знаю, что это связано с шириной, но я не могу понять это так, чтобы весь контент выровнялся. Я ищу, чтобы выровнять метку с входом флажка в наборе полей и центрировать его. Я попытался удалить ширину 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;
}```

1 Ответ

0 голосов
/ 06 февраля 2020

Добавить класс в 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, а также. Они объяснены выше.

Вы также делаете большой выбор с идентификаторами, я бы предложил вместо этого использовать классы.

Классы предназначены для повторного использования, а идентификаторы - нет. Это также влияет на доступность, поскольку дублирующиеся идентификаторы могут стать проблемой.

Надеюсь, это поможет:)

Полный код, с которым я тестировал. Тег стиля включен только для быстрой проверки на моем конце 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...