Ausrichten Textfelder in CSS-HTML-Formular

Ich versuche, ein Formular auf der Website wie folgt aussehen zu machen, wo die right side of text fields are aligned Ausrichten Textfelder in CSS-HTML-Formular

Wenn ich die Größe des Bildschirms zu ändern, sind die Textfelder nicht mehr in Ausrichtung. Wie kann ich sie unabhängig von der Bildschirmgröße ausrichten?

Hier ist mein Code:

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

Quelle

2016-04-19 cassie

Warum nicht Bootstrap verwenden? http://v4-alpha.getbootstrap.com/components/forms/ - Dies wird Ihr Formular sofort reagieren. – Amjad

Stop-in-line-Styling, und adoptieren 'getbootstrap' CSS, starten Sie es. –

Sie Bootstrap für diesen Zweck verwenden können. Verwenden Sie das Bootstrap-Stylesheet. Da der Bootstrap Responsive Webdesign bietet, wird Ihr Design automatisch basierend auf der Bildschirmgröße ausgerichtet. Schließen Sie die Felder in der Zeile ein. Dann machen Sie zwei Spalten, indem Sie die Klasse "col-md-6" hinzufügen, das Problem wird gelöst. Weitere Informationen zur Verwendung des Bootstrap-Vorgangs finden Sie unter this link.

Quelle

2016-04-19 18:25:22

Mithilfe von einfachem CSS können Sie alle Felder ausrichten.

Siehe folgende 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%; 
}

Quelle

2016-04-19 18:29:24 yk11

prüfen diese

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

Quelle

2016-04-19 18:37:30

Ausrichten Textfelder in CSS-HTML-Formular

Antwort

Verwandte Themen