在 css html 表单中对齐文本字段答案

【问题标题】：aligning text fields in css html form在 css html 表单中对齐文本字段
【发布时间】：2016-08-12 02:28:00
【问题描述】：

我正在尝试使网站表单看起来像这样 right side of text fields are aligned

当我更改屏幕大小时，文本字段不再对齐。无论屏幕大小如何，如何保持它们对齐？

这是我的代码：

<head>

  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <title>Coat Request Form</title>

    </head>

  <body>

    <form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

      <p>
        <input type=hidden name="oid" value="00Di0000000gO95">
        <input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq"> 

        <span style="display:inline-block" margin-right="30px">
          <label class="required" for="first_name" style="display:block">First Name</label> 
          <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
        </span>

        <span style="display:inline-block">
          <label class="required" for="last_name" style="display:block">Last Name</label>
          <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
        </span>
        <br>
        <span style="display:inline-block">
          <label class="required" for="email" style="display:block" >Email</label>
          <input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
        </span>

        <span style="display:inline-block">
          <label for="phone" style="display:block" >Phone</label>
          <input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
        </span>

        <br>

        <span style="display:inline-block">
          <label for="company" style="display:block">Company (optional)</label>
          <input id="company" maxlength="40" name="company" size="20" type="text" /><br>
        </span>

        <span style="display:inline-block">

          <label style="display:block">How many coats?</label>
          <input  id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>

        </span>


        <label style="display:block">Who are the coats for?</label>
        <textarea  id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" wrap="soft"></textarea><br>
        <input type="submit" name="submit" class="btn">

        <select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
          <option type="hidden" value="Coats">Coats</option> </select><br>
      </p>
    </form>
  </body>

【问题讨论】：

为什么不使用引导程序？ v4-alpha.getbootstrap.com/components/forms - 这将使您的表单立即响应。
停止内联样式，采用'getbootstrap' CSS，开始使用它。

标签： html css forms alignment

【解决方案1】：

检查一下

<head>

  <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
    <title>Coat Request Form</title>

    </head>

  <body>

    <form target="_top" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

      <p>
        <input type=hidden name="oid" value="00Di0000000gO95">
        <input type=hidden name="retURL" value="http://www.empowermentplan.org/#!thank-you/jiwpq"> 

        <span style="display:inline-block" margin-right="30px">
          <label class="required" for="first_name" style="display:block">First Name</label> 
          <input id="first_name" maxlength="40" name="first_name" size="20" type="text" required /><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
          <label class="required" for="last_name" style="display:block">Last Name</label>
          <input id="last_name" maxlength="80" name="last_name" size="20" type="text" required /><br>
        </span>
        <br>
        <span style="display:inline-block">
          <label class="required" for="email" style="display:block" >Email</label>
          <input id="email" maxlength="80" name="email" size="20" type="text" required/><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">
          <label for="phone" style="display:block" >Phone</label>
          <input  id="phone" maxlength="40" name="phone" size="20" type="text" /><br>
        </span>

        <br>

        <span style="display:inline-block">
          <label for="company" style="display:block">Company (optional)</label>
          <input id="company" maxlength="40" name="company" size="20" type="text" /><br>
        </span>

        <span style="display:inline-block;position:absolute;width: 50%;right: 10px;">

          <label style="display:block">How many coats?</label>
          <input  id="00Ni000000H0CxE" name="00Ni000000H0CxE" size="20" type="text" /><br>

        </span>


        <label style="display:block">Who are the coats for?</label>
        <textarea  id="00Ni000000H0Cy2" name="00Ni000000H0Cy2" rows="3" type="text" style:"position: absolute;
width: 98%;" wrap="soft"></textarea><br>
        <input type="submit" name="submit" class="btn">

        <select style="visibility:hidden" id="00Ni000000H0Cxx" name="00Ni000000H0Cxx" title="Topic">
          <option type="hidden" value="Coats">Coats</option> </select><br>
      </p>
    </form>
  </body>

【讨论】：

【解决方案2】：

使用简单的 CSS，您可以对齐所有字段。

请参阅以下 jsfiddle：https://jsfiddle.net/h5w2LLjd/

CSS：

.right {
    float: right;
}

.left {
    float: left;
}

.full {
    width: 100%;
}

.clear {
    clear: both;
}

textarea {
    box-sizing: border-box;
    width: 100%;
}

【讨论】：

【解决方案3】：

您可以为此目的使用引导程序。使用引导样式表。由于 bootstrap 提供响应式网页设计，因此您的设计将根据屏幕尺寸自动对齐。将字段括在行中。然后通过添加类“col-md-6”制作两列，问题就解决了。有关如何使用引导程序的更多详细信息，请访问this link.

【讨论】：