CSS

Question

我的混合移动应用程序中有一个按钮，当在 iphone 5 上查看时，它位于我想要的区域（中间中心）。

当我在 iphone 6 上查看它时它四处移动，现在我知道这是因为我的 css 这是非常具体的但我想知道我是否可以得到一些指导如何我可以放置一个在设备之间保持相同的按钮（相同位置）。

这是我的css，感谢大家的帮助:)

#divheader {

    position: relative;
}

#btn {
     position:absolute;
    left: 10px;
    top: 198px;
    text-align: center;
    color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="kendo/styles/StyleSheet.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2014.3.1411/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
<body>
<body>
   <div data-role="view" style="background-color: #212a33" id = "divheader" data-title="Blocks">
       <div data-role="navbar" id="test">
           <span data-role="view-title">My View Title</span>
        </div>
       <div style="background-color: #212a33">
           <div id=test3>
       <span class="description" id="test4">Currently in stock:</span>
                    <input id="numeric" type="number" value="17" min="0" max="100" step="1" />
           </div>
       <a id="btn" data-role="button" data-click="onClick" align="center" style="margin: 0 auto; width: 300px;" >Click me!</a>
       </div>
       <div id="test2">
       </div>
       </div>
   </div>

   <script>
        // the content of the document.body is used by default
       var app = new kendo.mobile.Application();
   </script>
   <script type="text/javascript">
    var div = document.getElementById('test2');

    div.style.height = document.body.clientHeight + 'px';
</script>



</body>
</body>
</html>

Answer 1

你说得对，你的 CSS 对绝对定位非常具体。它的左间距始终为 10px，宽度为 300px，适用于 iPhone 5，宽度为 320px。

如果无论设备的宽度如何，你都希望按钮居中，我会选择你已经在按钮的内联 css 中编写的 margin: 0 auto;。
对于与 margin: 0 auto 一起使用的元素，它必须满足一些要求，您可以看到 here .

你的 CSS 看起来像这样

#btn {
  display: block;
  margin: 0 auto; 
  width: 300px;
  color: #171e28;
  background-color: #f4af03;
  border-color: #ee9f05;
  border: 1px solid; /*For the border color to work you need a border*/
}

width和margin只是从降价中的按钮style-标签移到那里。

当然，这会将按钮移回到 header 中，因此如果您不希望它出现在其中，您应该在 markdown 中将其声明在 header 之外。

编辑：
对于水平居中和垂直居中的按钮 div 以及视口的整个高度，上面的代码不起作用。

要摆脱 javascript，您可以做的第一件事就是给 div 一个 100vh 的 height（如解释的 here） , 但我想这是个人喜好。

对于按钮的 CSS，这应该有效：

#btn {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  transform: translateY -50%;
  color: #171e28;
  background-color: #f4af03;

}

对于水平部分，我们将元素的左间距设置为 50%。由于它的左边框位于页面宽度的 50% 处，因此我们使用 margin-left: -150px 更正此问题（将元素向左移回其宽度的一半）。

垂直部分我们做的基本一样，但是我们不知道这里的确切高度，所以位置被修正transform: translateY -50%;。
(Source)

CSS - 移动按钮出现在不同区域，不同设备

CSS - Mobile button appears in different areas, different devices

html

iphone

ios

hybrid-mobile-app