Html 将两个输入文本放在同一行中
我正在使用html和jquery mobile。以下是代码:Html 将两个输入文本放在同一行中,html,css,jquery-mobile,Html,Css,Jquery Mobile,我正在使用html和jquery mobile。以下是代码: <div data-role = "content"> <form action = "?" method="post" name="form" id = "form"> <fieldset> <div data-role = "fieldcontain" class = "ui-hide-label">
<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>
名称
姓
地址
出生地
省
出生日期
男性
女性
政治学
心脏病学
神经科
我不能在同一行输入两个文本。我尝试了块网格,但它不起作用
DIV
s是块元素-默认情况下,它们占据100%的宽度。这将使以下元素出现在“下一行”上
因此,您需要将第二组元素移动到与第一组元素相同的DIV中(或者使用固定宽度重新设置DIV的样式,并使用float,但这更具挑战性)只需将float添加到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>
名称
姓
您应该查看jquerymobile中的两列布局:
您的代码应该是这样的:
<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>
名称
姓
我知道这个问题有点老了,但我也遇到了同样的问题,这对我来说很有用:
<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>
您甚至可以添加一些样式来更改字段的相对大小。另一个技巧是检查data type=“horizontal”类型(没有双关语)
一些东西:
还有一件事:
我正在使用
包装器来覆盖嵌套
属性(由jquery mobile生成)的显示类的输入。此外,还必须显式设置输入的宽度
范例
CSS:
HTML:
一些文本
一些文本
一些文本
你是指并排?到目前为止你试过什么?您尝试时出现了什么问题?您的CSS是什么?您可以使用simplefloat
将它们放在同一行。丑陋的表是您的选择吗?@ShadowWizard您在JSFIDLE上显示的内容是错误的,您没有加载jquery UI模块@吕克·赖特没有注意到这一点。使用jQuery时,jQuery UI和jQuery Mobile都已加载。你能把小提琴更新成一个不起作用的例子吗?
<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>
.inlineinput div {
display: inline;
}
<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>