使用jQuery Mobile并排显示2个按钮

Question

我是整个jQuery / Mobile / HTML5 / CSS3的新手。

使用下面的代码，我想水平显示按钮（每个按钮的宽度为50％）并在屏幕的100％上伸展。 听起来很简单，但是由于某些原因，按钮垂直显示：

<!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/

Answer 1

您的button上有边框，因此您应该添加box-sizing: border-box DEMO

* {
  box-sizing: border-box;
}
#page-buttons .ui-controlgroup-controls {
  width: 100%;
}
#page-buttons .ui-controlgroup-controls a {
  width: 50%;
}

Answer 2

解决此问题的一种简单方法是为容器提供display: flex;

#page-buttons .ui-controlgroup-controls {
  width: 100%;
  display: flex;
}

的jsfiddle

使用jQuery Mobile并排显示2个按钮

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-06-20 15:31:17

解决方案2
2 2016-06-20 15:32:20

使用jQuery Mobile并排显示2个按钮

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-06-20 15:31:17

解决方案2 2 2016-06-20 15:32:20

解决方案1
2 已采纳 2016-06-20 15:31:17

解决方案2
2 2016-06-20 15:32:20