Как я могу переместить электронную почту - PullRequest
Новая
       0

Как я могу переместить электронную почту

0 голосов
/ 16 июня 2020

Вот мой HTML и CSS часть, где была обнаружена ошибка. Я просто хотел создать макет рабочего стола, поскольку я уже начал с мобильного макета. Итак, я начал размещать метки и поля ввода, но у меня уже были некоторые проблемы с расположением, и некоторые исправлены с помощью flexbox. Я пытался изменить отображение, переполнение, использовать числа с плавающей запятой, обернуть текст, но ничего не сработало 

    
    @media only screen and (min-width: 700px) {
      .speaker-form,
      .speaker-form-header {
        width: 600px;
      }
      .form-row {
        flex-direction: row;
        align-items: flex-start; /* To avoid stretching */
        margin-bottom: 20px;
      }
      .form-row input[type='text'],
      .form-row input[type='email'] {
        background-color: #FFFFFF;
        width: 250px;
        height: initial;
      }
      .form-row label {
        text-align: right;
        width: 120px;
        margin-top: 7px;
        padding-right: 20px;
      }
    }
    <!DOCTYPE html>
    <html lang='en'>
      <head>
        <meta charset='UTF-8'/>
        <title>Speaker Submission</title>
        <link rel='stylesheet' href='styles.css'/>
      </head>
      <body>
        <header class='speaker-form-header'>
          <h1>Speaker Submission</h1>
          <p><em>Want to speak at our fake conference? Fill out
            this form.</em></p>
        </header>
        <form action='' method='get' class='speaker-form'>                          <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
          <div class='form-row'>
            <label for='full-name'>Name</label>                                     <!--The label element lets us collect user input. The for and id attribute must always match-->
              <input id='full-name' name='full-name' type='text'/>                  <!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
            <label for='email'>Email</label>
              <input id='email' name='email' type='email' placeholder='yourname@example.com'/>
          </div>
        </form>
      </body>
    </html>

Ответы [ 3 ]

0 голосов
/ 16 июня 2020

Это то, что вам нужно? 

@media only screen and (min-width: 700px) {
  .speaker-form,
  .speaker-form-header {
    width: 600px;
  }
  .form-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }
  .form-row input[type='text'],
  .form-row input[type='email'] {
    background-color: #FFFFFF;
    width: 250px;
    height: initial;
  }
  .form-row label {
    width: 120px;
    margin-top: 7px;
    padding-right: 20px;
  }
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8' />
  <title>Speaker Submission</title>
  <link rel='stylesheet' href='styles.css' />
</head>

<body>
  <header class='speaker-form-header'>
    <h1>Speaker Submission</h1>
    <p><em>Want to speak at our fake conference? Fill out
            this form.</em></p>
  </header>
  <form action='' method='get' class='speaker-form'>
    <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
    <div class='form-row'>
      <label for='full-name'>Name</label>
      <!--The label element lets us collect user input. The for and id attribute must always match-->
      <input id='full-name' name='full-name' type='text' />
      <!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
      <label for='email'>Email</label>
      <input id='email' name='email' type='email' placeholder='yourname@example.com' />
    </div>
  </form>
</body>

</html>
0 голосов
/ 16 июня 2020

иногда решение состоит в том, чтобы немного изменить свой html. В этом случае проще добавить деление для каждого label и input. Таким образом, вы можете легко изменить display метод на inline(-block) или block, чтобы поместить один div под другой.

Вам нужно будет только изменить form .form-row .section-form css для вашей мобильной / настольной версии, так как более короткий код css всегда лучше (сокращая время загрузки внешних ресурсов).

Выбор ввода с их типом полезен, когда вам нужно сделать определенные c вещи для одного из них, здесь, поскольку вы этого не делаете, вы можете удалить выбор типа и оставить только form .form-row .section-form input. Это проще, понятнее и быстрее.

Вы также можете добиться того, что хотите, изменив .form-row на display: grid ( сетку ), указав, сколько rows и columns и, наконец, изменив порядок каждого .section-form, чтобы разместить их так, как вы хотите, но это немного сложнее, и я думаю, вам это не нужно для формы с 2 входами и метками. 

form .form-row .section-form {
  display: block;
  margin: 10px 5px;
}

form .form-row .section-form > * {
  display: inline-block;
}


/********** INLINE version ************/
/*
form .form-row .section-form {
  display: inline-block;
}

*/
<!DOCTYPE html>
    <html lang='en'>
      <head>
        <meta charset='UTF-8'/>
        <title>Speaker Submission</title>
        <!-- <link rel='stylesheet' href='styles.css'/> -->
      </head>
      <body>
        <header class='speaker-form-header'>
          <h1>Speaker Submission</h1>
          <p><em>Want to speak at our fake conference? Fill out
            this form.</em></p>
        </header>
        <form action='' method='get' class='speaker-form'>                          <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
          <div class='form-row'>
          <div class="section-name section-form">
            <label for='full-name'>Name</label>                                     <!--The label element lets us collect user input. The for and id attribute must always match-->
              <input id='full-name' name='full-name' type='text'/> 
              </div><!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
            <div class="section-email section-form">
            <label for='email'>Email</label>
              <input id='email' name='email' type='email' placeholder='yourname@example.com'/>
              </div>
          </div>
        </form>
      </body>
    </html>
0 голосов
/ 16 июня 2020

Я изменил ваш код, избавившись от flex на .form-rows (очевидно, вам нужно делать это только на экранах размером> 700 пикселей, как показывает ваш медиа-запрос).

Затем я снял width с label, так как он все равно не имел никакого эффекта, когда вы использовали flex, а затем разместил как label, так и input.

Чтобы начать новую строку, вы можете использовать clear:left в label, что по сути означает запуск новой строки и игнорирование всего, что до того, как она была перемещена.

Полный код: 

 
    @media only screen and (min-width: 700px) {
      .speaker-form,
      .speaker-form-header {
        width: 600px;
      }
      .form-row {
     /*   flex-direction: row;
        align-items: flex-start; /* To avoid stretching */
        margin-bottom: 20px;
      }
      .form-row input[type='text'],
      .form-row input[type='email'] {
        background-color: #FFFFFF;
        width: 250px;
        height: initial;
        float:left;
      }
      .form-row label {
        text-align: right;
        width: auto;
        margin-top: 7px;
        padding-right: 20px;
        clear:left;
        float:left
      }
    }
    <!DOCTYPE html>
    <html lang='en'>
      <head>
        <meta charset='UTF-8'/>
        <title>Speaker Submission</title>
        <link rel='stylesheet' href='styles.css'/>
      </head>
      <body>
        <header class='speaker-form-header'>
          <h1>Speaker Submission</h1>
          <p><em>Want to speak at our fake conference? Fill out
            this form.</em></p>
        </header>
        <form action='' method='get' class='speaker-form'>                          <!-- The action attribute contains a URL. All the information is sent to that URL. Meanwhile, the method attribute lets you later analyze the info.-->
          <div class='form-row'>
            <label for='full-name'>Name</label>                                     <!--The label element lets us collect user input. The for and id attribute must always match-->
              <input id='full-name' name='full-name' type='text'/>                  <!--The input element creates a text field, and it can change according to the type of arguments stated later. When the information is returned to the server, it returns with the name stated in the name attribute plus the value entered-->
            <label for='email'>Email</label>
              <input id='email' name='email' type='email' placeholder='yourname@example.com'/>
          </div>
        </form>
      </body>
    </html>

Рабочая скрипка: https://jsfiddle.net/9rah0516/ (фрагмент не будет отображаться должным образом, так как вы ограничены шириной экрана - или попробуйте запустить нажав Full Page после запуска сниппета, где он будет работать)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...