jQuery 移动按钮对齐问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15655414/
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 button alignment issue
提问by karthick
I am trying my hand at jQuery Mobile and I find it a bit confusing because it's a mark-up driven framework.
我正在尝试使用 jQuery Mobile，但我发现它有点令人困惑，因为它是一个标记驱动的框架。
I created a test page in which I am just trying to align one button to the right, but I am not able to do that. I tried float: rightbut it's not working. Although margin-leftis working by giving a particular percentage, the same is not working when I resize the page.
我创建了一个测试页面，我只是想将一个按钮向右对齐，但我无法做到这一点。我试过了，float: right但它不起作用。虽然margin-left通过给出特定百分比来工作，但当我调整页面大小时同样不起作用。
Here is my Fiddle code. Any help would be great.
这是我的小提琴代码。任何帮助都会很棒。
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 style="font-size: 1.5em; text-align: left; margin-left: 70px;"
data-role="none">Test</h1>
</div>
<div id="contentLogin" align="center" name="contentConfirmation" data-role="content">
<p style="font-size: 0.85em; color: #000000">
<b>Welcome to my page</b>
</p>
<br>
<div class="ui-grid-b responsive">
<div style="margin: 0px; margin-top: 0px; margin: 0px;" class="ui-block-a">
<div data-role="fieldcontain">
<label for="url" class="alignleft">Username:*</label>
<input id="userId1" class="required" name="uid_r" placeholder="" type="text">
</div>
<div data-role="fieldcontain">
<label for="url" class="alignleft">Password:*</label>
<input id="Password1" class="required" name="pwd_r" value="" type="password">
</div>
<button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button>
</div>
<div class="ui-block-b">BLOCK A ADS</div>
<div class="ui-block-c" style="margin-top: 0px;">
BLOCK C
</div>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
</div>
</div>
回答by Jay Mayu
Why not place your button inside a div and right align the div? everything inside the parent div including the button will be right aligned.
为什么不将按钮放在 div 内并右对齐 div？包括按钮在内的父 div 中的所有内容都将右对齐。
<div align="right"><button id="login" data-theme="a" type="button" href="home.html" data-mini="false" data-inline="true" >Login</button></div>
Check out the fiddle http://jsfiddle.net/mayooresan/96s59/2/
回答by NuclearPeon
Use ui-btn-right. It's easier, less verbose and (I think) the jquery way to do things.
使用ui-btn-right. 它更容易，更简洁，并且（我认为）jquery 做事的方式。
<a href="#" class="ui-btn-right ui-btn-inline">Login</a>
回答by NiloVelez
The previous answer is correct, but you should use CSS styles instead (aling="" is deprecated)
上一个答案是正确的，但您应该改用 CSS 样式（aling="" 已弃用）
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
回答by pelms
You can run into problems if you want multiple buttons...
如果你想要多个按钮，你可能会遇到问题......
Try:
尝试：
<div style="float:right">
<button data-inline="true">Login</button>
</div>
if you want to have multiple buttons (both left and right aligned).
如果你想有多个按钮（左右对齐）。
If you use:
如果您使用：
<div style="text-align: right;">
<button data-inline="true">Login</button>
</div>
the div will start a new block below any existing buttons, so you can't have other icons on the left hand side.
div 将在任何现有按钮下方开始一个新块，因此左侧不能有其他图标。
Class ui-btn-icon-left|rightlets you align the buttons left|right but I've found that using two buttons with ui-btn-icon-rightwill overlap them.
Classui-btn-icon-left|right允许您将按钮 left|right 对齐，但我发现使用两个按钮 withui-btn-icon-right会使它们重叠。
The template below worked for me for two left aligned buttons and two right in a footer:
下面的模板适用于我的两个左对齐按钮和页脚中的两个右对齐按钮：
<a href="#home" class="ui-btn">Home</a>
<a href="#intro" class="ui-btn">Intro</a>
<div style="float:right">
<a href="#review" class="ui-btn">Review</a>
<a href="#exit" class="ui-btn">Exit</a>
</div>
