एक ही पंक्ति

Question

में दो इनपुट पाठ डाल मैं एचटीएमएल उपयोग कर रहा हूँ और jQuery mobile.here कोड है:

<div data-role = "content"> 
     <form action = "?" method="post" name="form" id = "form"> 
      <fieldset> 
      <div data-role = "fieldcontain" class = "ui-hide-label"> 
       <label for="name">Name</label> 
       <input type="text" name="name" id="name" value="" placeholder="Name" /> 
      </div> 

      <div data-role ="fieldcontain" class= "ui-hide-label"> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
      </div> 

      <div data-role ="fieldcontain" class= "ui-hide-label"> 
       <label for="address">Address</label> 
       <input type="text" name="address" id="address" value="" placeholder="Address"/> 
      </div> 


       <div data-role="fieldcontain" class="ui-hide-label"> 
        <label for="birth-place">Birth Place</label> 
        <input type="text" name="birth-place" id="birth_place" value="" placeholder="Birth Place" /> 
       </div> 
       <div data-role = "fieldcontain" class="ui-hide-label"> 
        <label for="province">Province</label> 
        <input type="text" name="province" id="province" value="" placeholder="PR" /> 
       </div> 


       <div data-role="fieldcontain" class="ui-hide-label"> 
        <label for"date">Birth Date</label> 
        <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" /> 
       </div> 

       <div data-role="fieldcontain"> 
        <fieldset data-role="controlgroup" data-type="horizontal"> 
         <input type="radio" name="radio-choice-1" id="radio-choice-1" value="male" /> 
         <label for="radio-choice-1">Male</label> 
         <input type="radio" name="radio-choice-1" id="radio-choice-2" value="female" /> 
         <label for="radio-choice-2">Female</label> 
        </fieldset> 
       </div> 

       <div data-role="fieldcontain" data-type="horizontal"> 
        <label for="select-choice-0"></label> 
        <select name="select" id="select"> 
         <option value="politrauma">Politrauma</option> 
         <option value="cardiologico">Cardiologico</option> 
         <option value="neurologico">Neurologico</option> 
        </select> 
       </div> 
      </fieldset> 
     </form> 
    </div> 

मैं एक ही पंक्ति दो इनपुट पाठ में डाल करने में सक्षम नहीं हूँ। मैंने ब्लॉक ग्रिड की कोशिश की लेकिन यह

Answer 1

DIV एस ब्लॉक तत्व हैं - डिफ़ॉल्ट रूप से वे 100% चौड़ाई लेते हैं। इससे निम्नलिखित तत्व "अगली पंक्ति" पर दिखाई देते हैं।

तो, आप पहली बार के रूप में ही DIV में तत्वों पर दूसरे सेट बढ़ने की जरूरत है (या एक निश्चित-चौड़ाई के साथ शैली फिर से अपने divs और तैरता उपयोग करते हैं, लेकिन यह है कि एक छोटे से अधिक चुनौतीपूर्ण है)

Answer 2

बस

divs को तैरता जोड़ें:

<form action = "./includes/user_form.php" method="post" id = "form"> 
     <div data-role = "fieldcontain" class = "ui-hide-label" style="float:left"> 
      <label for="name">Name</label> 
      <input type="text" name="name" id="name" value="" placeholder="Name" /> 
     </div> 
     <div data-role ="fieldcontain" class= "ui-hide-label" style="float:left"> 
      <label for="surname">Surname</label> 
      <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
     </div> 
    </form> 

Answer 3

आप jquerymobile में दो कॉलम लेआउट पर गौर करना चाहिए:

: jquerymobile.com/demos/1.0.1/docs/content/content-grids.html

आपका कोड कुछ इस तरह होना चाहिए

<form action = "./includes/user_form.php" method="post" id = "form"> 
    <div class="ui-grid-a"> 
      <div data-role = "fieldcontain" class = "ui-hide-label ui-block-a"> 
       <label for="name">Name</label> 
       <input type="text" name="name" id="name" value="" placeholder="Name" /> 
      </div> 
      <div data-role ="fieldcontain" class= "ui-hide-label ui-block-b"> 
       <label for="surname">Surname</label> 
       <input type="text" name="surname" id="surname" value="" placeholder="Surname"/> 
      </div> 
    </div> 
</form> 

Answer 4

मैं जानता हूँ कि इस सवाल के पुराने तरह है, लेकिन मैं सिर्फ एक ही समस्या थी और यह है कि क्या मेरे लिए काम किया:

<fieldset class="ui-grid-a"> 
<div class="ui-block-a"> 
     <input type="text" id="" name="" value=""> 
</div> 
<div class="ui-block-b"> 
     <input type="text" id="" name="" value=""> 
</div> 

तुम भी रिश्तेदार आकार बदलने के लिए कुछ शैली जोड़ सकते हैं क्षेत्र का।

Answer 5

एक और युक्ति डेटा-प्रकार = "क्षैतिज"-प्रकार (कोई इरादा नहीं है) की जांच कर रही है।

<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal"> 
        <div data-role="fieldcontain"> 
         <label for="textinput11"> 
         Something: 
         </label> 
         <input name="something" id="textinput11" placeholder="" value="" type="text"> 
        </div> 

        <div data-role="fieldcontain"> 
         <label for="textinput12"> 
         Something else: 
         </label> 
         <input name="something_else" id="textinput12" placeholder="" value="" type="text"> 
        </div> 
        </fieldset> 

Answer 6

मैं कक्षा के <div> नेस्ट (jQuery मोबाइल द्वारा उत्पन्न) display विशेषता ओवरराइड करता है के साथ इनपुट के आसपास <span> आवरण का उपयोग कर रहा हूँ। इसके अलावा आपको स्पष्ट रूप से इनपुट की चौड़ाई निर्धारित करनी होगी।

उदाहरण http://jsfiddle.net/FabyD/

सीएसएस:

.inlineinput div { 
    display: inline; 
} 

HTML:

<div> 
    some text 
    <span class="inlineinput"> 
     <input type='text' style='display: inline; width: 50px;' /> 
    </span> 
    some text 
    <span class="inlineinput"> 
     <input type='text' style='display: inline; width: 50px;' /> 
    </span> 
    some text 
</div>