jquery mobile inline text input and button

问题

I start to work with Jquery mobile, and I faced a problem that in a regular HTML code it is effortless to solve her.

The problem: I try to split the page like in the picture below-

Picture- The way I want the page would looklike

In the left page, I want to add dropdown list(That's not the problem), and in right left of the screen I want to add the "Age" and two text box in the same line! but it does not let me add everything in the same line

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?

Thanks.

回答1:

Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/

Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.

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.

Here is a playground:

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

来源：https://stackoverflow.com/questions/53264731/jquery-mobile-inline-text-input-and-button

标签

html

jquery-mobile