0

我正在尝试创建三个水平布局的控件。为了实现这一目标，我目前正在尝试以下方法：

<div data-role="controlgroup" data-type="horizontal">
  <input id="button1" type="button" value="<" />
  <span><input id="tally1" type="text" /></span>
  <input id="button2" type="button" value=">" />
</div>

此文本输入字段似乎在其自身前后插入了一个换行符。如果我删除文本字段，一切都会按预期进行。如何摆脱换行符？如果不能，如何在水平堆栈中布局这三个字段？

谢谢！

4

2 回答 2

3

To prevent a line break after text, the field FOLLOWING the text has to have "display:inline !important;".

Also, for some reason which may be corrected after the (current to this post) jquery mobile v1.20, the heights of select and text-inputs are not quite right and need a cryptic mix of padding and margins resetting to work.

The "!important" specs were required in the following fiddle. Here is a list with 2 lines - one aligned to normal buttons and one to the mini buttons. Good Luck!

See http://jsfiddle.net/RM5eq/

    <style>
.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;
}
</style>
<div data-role="page" class="type-home">


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

    <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>
    <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 bigselect'>    
      <select name="select-choice-0" id="select-choice-1" data-inline="true" class=' '>
        <option >SM1</option>
        <option value="standard">Standard: 7 day</option>
      </select>
    </div>

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

    <div  class='floatright textwidth'>
      <input type="text" placeholder="right" class='biginputheight'></input>
    </div>  

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

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>

    <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='floatleft closespacing'>
      <select name="select-choice-2" id="select-choice-2" data-inline="true" data-mini='true'>
        <option >SM2</option>
        <option value="standard">Standard: 7 day</option>
      </select>
    </div>       

    <div class='floatright closespacing'>
      <div  class='floatright closespacing'>    
        e3 Text<br>on right
      </div>
      <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-23T17:49:56.673 回答
2

这应该有效：

#tally1 {
    display:inline;
}

尝试更改display:inline;为display:inline !important;它可能是文本字段继承了 JQuery Mobile 的显示样式，您可以使用!important它来覆盖它，但仅作为最后的手段。

于 2012-04-07T15:30:00.640 回答