Question

我真的是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>

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

1 个答案: