3

我试图让标题在左侧和右侧有两组按钮，但我无法让所有东西对齐并正确地向左/向右浮动。关于实现这一目标的简单方法的任何想法。

     <div data-theme="a" data-role="header" data-position="fixed">
<!-- back button -->                    
       <a style=" margin:5px 0 10px 0;" data-role="button" 
    data-transition="slide" data-theme="b" href="#track_dash" 
    data-icon="arrow-l" data-iconpos="left">
          Back
       </a>

<!-- chart switch -->                    
            <div data-role="fieldcontain" style="float: right;">
                <form action="#" method="POST">
                    <fieldset data-role="controlgroup" data-type="horizontal" >
                       <input name="radiobuttons5" id="radio7" value="radio1" type="radio" />
                       <label for="radio7">
                            List
                       </label>
                       <input name="radiobuttons5" id="radio8" value="radio8" type="radio" />
                       <label for="radio8">
                            Chart
                       </label>
                    </fieldset>
                </form>
            </div>

      </div>

左侧设计/右侧实际编码设计

4

2 回答 2

16

class="ui-btn-left在后退按钮和控制组上使用class="ui-btn-right"。

也许您还需要在两个元素之间放置一个标题，至少是空的<h1></h1>

于 2012-05-23T15:17:12.463 回答
7

你现在可能想出了一个解决方案，但我在页脚中做了这个，它对我有用：

<div data-role="footer" class="ui-bar" data-position="fixed" data-id="myFooter">
    <div class="footerContainer">    
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-left">Cancel</a>
        <a href="index.html" data-role="button" data-mini="true" data-inline="true"class="ui-btn-right">Next</a>
    </div>
</div>

本质上，我将按钮包装在一个 div 中，这使我可以使用 ui-btn-left 和 right 来浮动按钮并正确对齐它们，到目前为止似乎没有引起任何冲突。

这是CSS

.footerContainer{
    width:97%;
    height:38px;
    border:none;
    position:relative;
    }

我将宽度设置为 97% 因为 100% 将采用宽度加上填充和 position:relative 以便包含浮动。

于 2012-09-05T15:16:27.057 回答