Html 将两个输入文本放在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9178935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
put two input text in the same line
提问by Mazzy
I'm using html and jquery mobile.here is the code:
我正在使用 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>
I'm not able to put in the same line two input text. I tried block grid but it didn't work
我无法将两个输入文本放在同一行。我试过块网格，但没有用
回答by Jorden van Foreest
You should look at two column layout in jquerymobile: jquerymobile.com/demos/1.0.1/docs/content/content-grids.html
您应该查看 jquerymobile 中的两列布局： jquerymobile.com/demos/1.0.1/docs/content/content-grids.html
Your code should be something like this:
你的代码应该是这样的：
<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>
回答by Adan
I know this question is kind of old but I just had the same problem and this is what worked for me:
我知道这个问题有点老了，但我遇到了同样的问题，这对我有用：
<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>
You can even add some style to change the relative size of the field.
您甚至可以添加一些样式来更改字段的相对大小。
回答by HellaMad
Just add floats to the divs:
只需向 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>
回答by CrazyMORF
I'm using <span>wrapper around input with class that overrides displayattribute of nested <div>(generated by jquery mobile). Also you must explicitly set width of input.
我<span>在输入周围使用包装器，该类覆盖display了嵌套的属性<div>（由 jquery mobile 生成）。此外，您必须明确设置输入的宽度。
Example http://jsfiddle.net/FabyD/
CSS:
CSS：
.inlineinput div {
display: inline;
}
HTML:
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>
回答by Diodeus - James MacFarlane
DIVs are block elements - by default they take up 100% width. This makes the following elements appear on "the next line".
DIVs 是块元素 - 默认情况下它们占据 100% 的宽度。这使得以下元素出现在“下一行”上。
So, you need to move the second set on elements into the same DIV as the first (or re-style your DIVs with a fixed-width and use floats, but that's a little more challenging)
因此，您需要将元素上的第二个集合移动到与第一个相同的 DIV（或使用固定宽度重新设置 DIV 的样式并使用浮动，但这有点更具挑战性）
回答by patriques
Another tip is checking out the data-type="horizontal" -type (no pun intended).
另一个技巧是检查 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>
