我真的是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;
如果有人可以帮助我,请提前感谢您。
答案 0 :(得分:0)
请注意padding
不会在元素之外创建空格,因为margin
。
我想我已经使用calc(100% - 12px)
width:
解决了您的问题