在同一高度下的名字。输入框已经是一样的宽度,html,css"/>
时间戳

首页 > 解决方案 > 如何移动电子邮件在同一高度下的名字。输入框已经是一样的宽度

html - 如何移动电子邮件在同一高度下的名字。输入框已经是一样的宽度

问题描述

这是我的 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>

标签： htmlcss

解决方案

有时解决方案是更改您的 html。label在这种情况下，为每个和添加一个分区会更容易input。这样，您可以轻松地将display 方法更改为inline(-block)或block将一种方法div置于另一种方法之下。

您只需form .form-row .section-form为您的移动/桌面版本更改 css，因为较短的 css 代码总是更好（减少外部资源的加载时间）。

当您需要为其中一个执行特定操作时，选择输入及其类型很有用，因为您不这样做，您可以删除类型选择并仅保留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>

推荐阅读