CSS jQuery Mobile 标题按钮左右浮动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10722139/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Mobile header button float left and right
提问by acctman
i'm trying to get the header to have two sets of button on the left and right, but i'm having trouble getting everything to line up and float left/right properly. Any idea on an easy way to accomplish this.
我试图让标题在左侧和右侧有两组按钮，但我无法让所有东西对齐并正确地向左/向右浮动。关于实现这一目标的简单方法的任何想法。
<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>
回答by Joanes
Use class="ui-btn-lefton the back button and class="ui-btn-right"on the controlgroup.
使用class="ui-btn-left上的后退按钮，并class="ui-btn-right"在controlgroup。
Maybe you also need to put a header between both elements, at least empty <h1></h1>
也许你还需要在两个元素之间放一个标题，至少是空的 <h1></h1>
回答by Likwid_T
you probably figured out a solution by now but I did this in my footer and it worked out for me:
你现在可能想出了一个解决方案，但我在我的页脚中做了这个，它对我有用：
<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>
Essentially I wrapped my buttons in a div and that allowed me to use ui-btn-left and right to float the buttons and align them properly doesn't seem to cause any conflicts so far.
基本上，我将我的按钮包裹在一个 div 中，这允许我使用 ui-btn-left 和 right 来浮动按钮并正确对齐它们，到目前为止似乎没有引起任何冲突。
Here's the css
这是css
.footerContainer{
width:97%;
height:38px;
border:none;
position:relative;
}
I set the width to 97% because 100% will take the width plus padding and position:relative so that the float is contained.
我将宽度设置为 97%，因为 100% 将采用宽度加上填充和位置：相对，以便包含浮动。
