0

水平に配置された3つのコントロールを作成しようとしています。これを達成するために、私は現在次のことを試みています。

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

このテキスト入力フィールドは、それ自体の前後に改行を挿入しているようです。テキストフィールドを削除すると、すべてが期待どおりにレイアウトされます。改行を取り除くにはどうすればよいですか？できない場合は、これら3つのフィールドを水平スタックにレイアウトするにはどうすればよいですか？

ありがとうございました！

4

2 に答える 2

3

テキストの後の改行を防ぐために、テキストに続くフィールドには「display：inline！important;」が必要です。

また、（この投稿の現在の）jquery mobile v1.20の後に修正される可能性のある何らかの理由で、selectとtext-inputsの高さが完全に正しくなく、パディングとマージンの不可解な組み合わせをリセットして機能させる必要があります。

次のフィドルでは、「！important」仕様が必要でした。これは2行のリストです。1つは通常のボタンに、もう1つはミニボタンに配置されています。幸運を！

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;てみてください。テキストフィールドがJQueryMobileから表示スタイルを継承している可能性があり!importantます。これをオーバーライドするために使用しますが、これは最後の手段としてのみです。

于 2012-04-07T15:30:00.640 に答える