为什么在我的Phonegap应用中只应用最小宽度为100%的填充左边?

时间:2016-02-10 22:49:13

标签: css cordova

我真的是CSS的初学者,并且遇到了一些问题。对于这个问题,我真的试图找到答案(并阅读几页关于边距,填充,框系统......)但我找不到解决方案。

我正在开发一个Phonegap应用程序,现在我尝试让应用程序看起来更好看。为此,我希望所有元素都居中,灰色背景应该在整个页面。为了达到这个目的,我把它全部放在一个div类中,它的min-width和min-height设置为100%。现在我希望元素在左侧和右侧有一个填充,这样它们就不会完全粘在页面边缘。我的问题是只应用了padding-left(如果我将值设置得更大,左侧的填充也会变大,并且当元素太大时将元素移出屏幕)但是padding-right完全被忽略。

我的HTML标记:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>Home Automatization</title>

</head>

<body>

    <div class="app">
        <h1>Relay switch</h1>
        <br>
        <br>
        <br>
        <br>
        <h2> TextTextTextTextTextTextTextTextText</h2>
        <br>
        <form>
        <label for="relay-switch">Relay:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1" onchange="changeHandler()">
        </form>
        <br>
        <br>
        <button id="logout">Logout</button>
    </div>

</body>

相关的CSS:

.app {
background-color:#E4E4E4; 
position:fixed;             
min-height:100%;
min-width:100%;
padding-top:60px;
padding-left:5px;
padding-right:5px;
text-align:center;

如果有人可以帮助我,请提前感谢您。

1 个答案:

答案 0 :(得分:0)

请注意padding不会在元素之外创建空格,因为margin

我想我已经使用calc(100% - 12px)

上的width:解决了您的问题

https://jsfiddle.net/bb1yb9w2/