把两个输入文本在同一行

我使用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>

我不能够把在同一行中两个输入文本。我试过块格，但它没有工作

来源

2012-02-07 Mazzy

您可以通过侧方的意思？你试过什么了？当你尝试时出了什么问题？ – 2012-02-07 15:29:39

什么是你的CSS？你可以使用简单的'float'使它们在同一行。 – 2012-02-07 15:30:24

DIV s是块元素 - 默认情况下它们占用100％的宽度。这使得下列元素出现在“下一行”上。

所以，你需要移动的第二组上的元素在同一个DIV作为第一个（或重新风格，配有固定宽度您的DIV和使用花车，但是这是一个更具有挑战性）

来源

2012-02-07 15:31:25

刚添加到浮动的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>

来源

2012-02-07 15:34:07

正确，这里是[简单测试用例]（http://jsfiddle.net/PDrEP/）。 – 2012-02-07 15:39:34

不幸的是我试过，但没有工作 – Mazzy 2012-02-07 15:39:47

@ShadowWizard你在jsfiddle上显示的是错误的，你没有加载jQuery UI模块！ – 2013-05-24 09:17:30

你应该看看两个栏布局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>

来源

2012-02-07 16:12:41

我试图使用内容网格，但它没有工作。一些想法？ – Mazzy 2012-02-07 18:23:33

难看的桌子是您的选择吗？ – 2012-02-08 09:16:06

我知道这个问题是慈祥的老人，但我只是有同样的问题，这是对我工作：

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

，你甚至可以添加一些风格改变的相对大小领域的。

来源

2013-03-02 18:22:35 vasc0x

另一个提示是检查data-type =“horizontal”-type（无双关）。

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

来源

2013-04-01 15:50:11 patriques

我使用围绕输入<span>封装容器类中的覆盖的嵌套<div>（由jquery的移动台产生的）display属性。你也必须明确地设置输入的宽度。

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

来源

2013-06-11 10:03:46 CrazyMORF

把两个输入文本在同一行

回答

相关问题