が同じ行に

Question

を二つの入力テキストを入れて、私は、HTMLと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に要素の第2のセットを移動する必要があります（固定幅と使用山車を使用してdiv要素または再スタイルが、それはもう少し挑戦的です）

Answer 2

だけdiv要素に山車を追加します。

<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で2列のレイアウトになります。 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

もう1つのヒントはdata-type = "horizo​​ntal" -type（punが意図していない）をチェックしています。

<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

私は（jqueryの携帯電話によって生成された）、ネストされた<div>のdisplay属性をオーバーライドするクラスと入力周り<span>ラッパーを使用しています。また、入力の幅を明示的に設定する必要があります。

例http://jsfiddle.net/FabyD/

CSS：

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