[英]Using jQuery Mobile to display 2 buttons side-by-side
I'm new to the whole jQuery/Mobile/HTML5/CSS3. 我是整个jQuery / Mobile / HTML5 / CSS3的新手。
Using the code below, I want to display the buttons horizontally (50% wide each) and stretch across 100% of the screen. 使用下面的代码,我想水平显示按钮(每个按钮的宽度为50%)并在屏幕的100%上伸展。 Sounds simple, but for some reason the buttons display vertically:
听起来很简单,但是由于某些原因,按钮垂直显示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<style>
#page-buttons .ui-controlgroup-controls { width: 100%; }
#page-buttons .ui-controlgroup-controls a { width: 50%; }
</style>
</head>
<body>
<div id="page-buttons" data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">Previous</a>
<a href="#" data-role="button">Next</a>
</div>
</body>
</html>
The only way to display the buttons side-by-side is to set the width to 49.8%. 并排显示按钮的唯一方法是将宽度设置为49.8%。 But why?
但为什么?
I have created a jsfiddle here: https://jsfiddle.net/j0q0gqca/ 我在这里创建了一个jsfiddle: https ://jsfiddle.net/j0q0gqca/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.