我是整个 jQuery/Mobile/HTML5/CSS3 的新手。
使用下面的代码，我想水平显示按钮(每个 50% 宽)并在 100% 的屏幕上拉伸(stretch)。听起来很简单，但出于某种原因，按钮会垂直显示:
<!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>
并排显示按钮的唯一方法是将宽度设置为 49.8%。但是为什么？
我在这里创建了一个 jsfiddle:https://jsfiddle.net/j0q0gqca/
最佳答案
您在按钮 上有边框，因此您应该添加box-sizing: border-box DEMO
* {
box-sizing: border-box;
}
#page-buttons .ui-controlgroup-controls {
width: 100%;
}
#page-buttons .ui-controlgroup-controls a {
width: 50%;
}
关于javascript - 使用 jQuery Mobile 并排显示 2 个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37926308/