Question

我试图让网站形式看起来像这样 right side of text fields are aligned

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

这是我的代码：

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用bootstrap来实现此目的。使用bootstrap样式表。由于bootstrap提供响应式Web设计，因此您的设计将根据屏幕大小自动对齐。将字段包含在行中。然后通过添加类＃34; col-md-6＆＃34;制作两列，问题就解决了。有关如何使用引导程序的更多详细信息，请访问this link.

Answer 2

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

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

CSS：

elif answer == 'nba':
        NBAQues = random.randint(0,len(NBA1)-1)

    NBAVar = NBA1[NBAQues]

    print NBAVar
    NBAAnswer = raw_input()
    NBAAnswer = NBAAnswer.lower()
    if NBAAnswer == NBA2[NBAQues]:
        print Correct(totalPoints)
    elif NBAAnswer != NBA2[NBAQues]:
        print "False. The correct answer was", NBA2[NBAQues]
        NBA1.remove(NBAVar)
        NBA2.remove(NBA2[NBAQues])
        print "Choose another."

Answer 3

检查

＆＃13;

<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>

＆＃13;

以css html格式对齐文本字段

3 个答案: