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 个答案: