jQuery Mobile内联文本输入和按钮 [英] jQuery Mobile inline text input and button
问题描述
我已经开始使用jQuery Mobile，并且遇到了一个问题，在常规HTML代码中，该问题很容易解决.
I've started to work with jQuery Mobile, and I'm facing a problem that in a regular HTML code it is effortless to solve.
问题: 我试图像下面的图片一样拆分页面-
The problem: I am trying to split the page like in the picture below-
在左侧页面上，我想添加一个下拉列表(这不是问题)，在屏幕右侧，我想添加年龄".和同一行中的两个文本框，但不允许我在同一行中添加所有内容.
On the left page, I want to add a dropdown list (that's not the problem), and on the right of the screen I want to add the "Age" and two text boxes in the same line but it does not let me add everything in the same line.
我的问题是，有没有一种简单的方法，例如Bootstrap? 在jQuery Mobile中内联功能的最佳方法是什么?
My question, is there an easy way to it, for example like Bootstrap? What is the best way to combine features inline in jQuery Mobile?
谢谢.
推荐答案
Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/
除此之外，您问得对，因为JQM有其自己的生活方式.您可以在此处中尝试grids.
Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.
默认网格单元均匀分布，但是您可以轻松覆盖默认宽度.此外，通过使用ui-responsive类，网格将通过以窄宽度堆叠网格块来做出响应.
Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.
这是一个游乐场:
.ui-grid-a > .ui-block-b {
text-align: right;
}
.ui-grid-solo > .ui-block-a {
white-space: nowrap;
}
.ui-mobile .ui-grid-solo label {
display: inline;
}
.ui-grid-solo .ui-input-text {
width: 30%;
display: inline-block;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<select data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<div class="ui-grid-solo">
<div class="ui-block-a">
<label for="textinput-3">Range:</label>
<input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
<label for="textinput-4">-</label>
<input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
这篇关于jQuery Mobile内联文本输入和按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
