поместить два ввода текста в той же строке

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 s - элементы блока - по умолчанию они занимают 100% ширины. Это приводит к появлению следующих элементов в «следующей строке».

Таким образом, вы должны переместить второй набор на элементы в том же DIV, что и первый (или повторно стиле ваши DIVs с фиксированной шириной и использовать поплавки, но это немного сложнее)

Answer 2

Просто добавить поплавки дивы:

<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

Я использую <span> обертку ввода с классом, который переопределяет display атрибут вложенных <div> (генерируется JQuery мобильный). Также вы должны явно задать ширину ввода.

Пример 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>