2

在 JQuery Mobile 中，我试图用中间的输入框对按钮进行分组。下面是我的代码

<div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button">Yes</a>
        <input type="text"  value="0" min="0" max="20" size="2"  />
        <a href="#" data-role="button">Maybe</a>
    </div>

这是结果

任何想法都会很棒？

4

3 回答 3

1

单选按钮需要一个激进的 display:inline !important; ... 这是一个包含 2 行、一个普通按钮和一个迷你按钮的列表。

希望能帮助到你。 http://jsfiddle.net/den232/5mVv8/

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}

<div data-role="page" class="type-home">


<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal">
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">A1</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">B1</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="left" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div data-role="fieldcontain" class= 'forceinline'>
      <div class='floatleft closespacing'>    
        <fieldset data-role="controlgroup" data-type="horizontal" data-mini='true'>
          <input type="radio" name="radio-view" id="radio-view-a" value="aa"  />
          <label for="radio-view-a">AA</label>
          <input type="radio" name="radio-view" id="radio-view-b" value="bb"  />
          <label for="radio-view-b">BB</label>
        </fieldset>
      </div>
    </div>

    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  

     <div class='floatright closespacing'>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->

于 2012-10-23T18:32:20.650 回答
0

默认情况下，按钮占据视口的整个宽度。尝试使用 data-inline 属性来改变它。

http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-inline.html

您还需要一些 css 才能使输入看起来正确。以下似乎对我有用。您可能需要根据您的目的调整宽度。

input.ui-input-text {
    float: left;
    position: relative;
    display: inline-block;
    width: 50%;
}
于 2012-10-18T14:34:52.603 回答
0

该解决方案对我有用，并希望它可以帮助其他寻求相同的人。

.controlgroup-textinput{
    padding-top:.22em;
    padding-bottom:.22em;
}
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
    <a href="#" data-role="button">Yes</a>
    <input type="text"  value="0" min="0" max="20" size="2" data-wrapper-class="controlgroup-textinput ui-btn" />
    <a href="#" data-role="button">Maybe</a>
</fieldset>

于 2015-08-16T04:25:52.613 回答