【发布时间】：2016-02-10 22:49:12
【问题描述】：
我确实是 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;
如果有人可以帮助我，请提前非常感谢。
【问题讨论】：