साइड बाय साइड इनपुट फ़ील्ड्स के साथ HTML फॉर्म

Question

मेरे पास एक HTML फॉर्म है जो मूल रूप से लंबवत है लेकिन मुझे वास्तव में कोई जानकारी नहीं है कि एक ही पंक्ति पर दो टेक्स्ट फ़ील्ड कैसे बनाएं। उदाहरण के लिए नीचे दिया गया फॉर्म मैं उसी पंक्ति पर पहला और अंतिम नाम चाहता हूं बल्कि एक के नीचे एक।

<form action="/users" method="post"><div style="margin:0;padding:0"> 


      <div> 
       <label for="username">First Name</label> 
       <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

      </div> 

      <div> 
       <label for="name">Last Name</label> 
       <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="email">Email</label> 
       <input id="user_email" name="user[email]" size="30" type="text" /> 
      </div> 
      <div> 
       <label for="pass1">Password</label> 
       <input id="user_password" name="user[password]" size="30" type="password" /> 
      </div> 
      <div> 
       <label for="pass2">Confirm Password</label> 

       <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" /> 

      </div> 

Answer 1

एक div के लिए डिफ़ॉल्ट प्रदर्शन शैली "ब्लॉक है।" इसका मतलब है कि प्रत्येक नया div पहले के तहत होगा।

आप कर सकते हैं:

अवहेलना नाव का उपयोग कर के रूप में @Sarfraz पता चलता द्वारा प्रवाह शैली।

या

तत्वों आप एक ही लाइन पर चाहते हैं के लिए divs के अलावा कुछ का उपयोग करने के लिए अपना HTML बदलें। मेरा सुझाव है कि आप केवल "last_name" क्षेत्र

<form action="/users" method="post"><div style="margin:0;padding:0"> 
    <div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 

    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
    </div> 
    ... rest is same 

Answer 2

अपने divs में से प्रत्येक पर style="float:left" रखो:

<div style="float:left;">........... 

उदाहरण:

<div style="float:left;"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div style="float:left;"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

नई लाइन पर एक तत्व में कहें, यह डाल इसे नीचे div:

<div style="clear:both;">&nbsp;</div> 

बेशक, आप भी सीएसएस फ़ाइल में कक्षाएं बना सकता है:

.left{ 
    float:left; 
} 

.clear{ 
    clear:both; 
} 

और फिर अपने html इस तरह दिखना चाहिए:

<div class="left"> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
</div> 

<div class="left"> 
    <label for="name">Last Name</label> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

नई लाइन पर एक तत्व में कहें, यह नीचे div डाल यह:

<div class="clear">&nbsp;</div> 

अधिक जानकारी:

• CSS Float Clear Tutorial

Answer 3

मैं लैरी कश्मीर समाधान के साथ जाना होगा के लिए divs बाहर छोड़ देते हैं, लेकिन आप यह भी इनलाइन-ब्लॉक करने के लिए प्रदर्शन सेट कर सकते हैं यदि आप दोनों का लाभ चाहते हैं ब्लॉक और इनलाइन तत्वों।

आप डालने से div टैग में ऐसा कर सकते हैं:

style="display:inline-block;" 

या इस विधि के साथ CSS स्टाइलशीट में:

div { display:inline-block; } 

आशा है कि यह मदद करता है, लेकिन जैसा कि पहले उल्लेख किया है, मैं व्यक्तिगत रूप से होगा लैरी के समाधान के लिए जाएं ;-)

Answer 4

बैंडविड्थ की बचत के लिए, हमें <div><label> औरमें से प्रत्येक के लिए <div> शामिल नहीं करना चाहिए 210 जोड़ी

यह समाधान आपको बेहतर सेवा कर सकते हैं और पठनीयता

<div class="form"> 
      <label for="product_name">Name</label> 
      <input id="product_name" name="product[name]" size="30" type="text" value="4"> 
      <label for="product_stock">Stock</label> 
      <input id="product_stock" name="product[stock]" size="30" type="text" value="-1"> 
      <label for="price_amount">Amount</label> 
      <input id="price_amount" name="price[amount]" size="30" type="text" value="6.0"> 
</div> 

ऊपर दिए गए फ़ॉर्म के लिए सीएसएस होगा

.form > label 
{ 
    float: left; 
    clear: right; 
} 

.form > input 
{ 
    float: right; 
} 

मेरा मानना ​​है कि उत्पादन होगा वृद्धि हो सकती है निम्नलिखित के रूप में:

Answer 5

आपको टी के लिए इनपुट डालना चाहिए वह उसी नाम में अंतिम नाम जहां आपका पहला नाम है।

<div> 
    <label for="username">First Name</label> 
    <input id="user_first_name" name="user[first_name]" size="30" type="text" /> 
    <input id="user_last_name" name="user[last_name]" size="30" type="text" /> 
</div> 

फिर, अपने सीएसएस में अपने #user_first_name और #user_last_name ऊंचाई देने के लिए और उन दोनों को बाईं ओर तैरने लगते हैं। उदाहरण के लिए:

#user_first_name{ 
    max-width:100px; /*max-width for responsiveness*/ 
    float:left; 
} 

#user_lastname_name{ 
    max-width:100px; 
    float:left; 
}