Jquery mobile Jquery移动分组按钮和输入框 在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>

这是

---

有什么好主意吗？

默认情况下，按钮占据查看端口的整个宽度。尝试使用“数据内联”属性更改该属性

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

input.ui-input-text {
    float: left;
    position: relative;
    display: inline-block;
    width: 50%;
}

---

单选按钮需要一个积极的情况下显示：内联！重要的。。。这是一个包含两行、一个普通按钮和一个迷你按钮的列表

希望能有帮助

.floatleft{
浮动：左；
}
.对{
浮动：对；
}
.forceinline{/*阻止fieldcontain执行块操作*/
显示：内联！重要；
}
.textwidth{/*限制输入字段的宽度*/
宽度：80px；
}
.closespacing{/*控制元素之间的间距*/
保证金：0px 5px 0px 0px；
}
.bigselect{/*使用大按钮进行选择*/
填充：0px；
保证金：2px 5px 0px 0px；
}
.biginputheight{/*将文本输入高度与大按钮匹配*/
填充顶部：10px！重要；
填充底部：12px！重要；
}
.miniinputheight{/*将文本输入高度与迷你按钮匹配*/
填充顶部：5px！重要；
填充底部：5px！重要；
}

第一行li

A1
地下一层


AA
BB

最后一行li

---

这个解决方案对我很有效，希望它能帮助其他人找到同样的解决方案

.controlgroup textinput{
填料顶部：.22em；
垫底：.22em；
}

你希望它看起来怎么样？嗨，扎尔克，基本上你会在输入框的两侧（左和右）有一个按钮。嗨，乔什，不，这似乎不起作用，问题是输入框，移除输入框，按钮正确对齐。嗨，乔什，我创建了一把小提琴。仍然无法使其与您的更改一起工作。那么不确定。我明白你对JSFIDLE的看法，但是当我在本地将完全相同的代码放入一个空页面时，它就工作了。

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