我试图制作一个带有搜索栏的独立于浏览器的代码（此搜索栏我来自demos.jQuery.com），但是现在当我尝试固定左右边距百分比时（我希望它居中即使浏览器的宽度改变也可以对齐）我无法做到，我是CSS新手，有人可以帮助吗？
我到目前为止编写的代码是：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Screen1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen1.css">
</head>
<body>
<div id="header"><p class="p1"><b>Composite<img class="img1" src="https://cdn2.iconfinder.com/data/icons/picol-vector/32/arrow_sans_down-128.png" alt="alternate"></b></p></div>
<div id=""main>
<div data-role="main" id="main" class="ui-content">
<form>
<input data-type="search" id="divOfPs-input">
</form>
<div class="elements" data-filter="true" data-input="#divOfPs-input">
<p><strong>These</strong> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</p>
<p><strong>p elements</strong> nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<p><strong>are</strong> et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p><strong>filterable</strong> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
</div>
</div>
</div>
</body>
</html>
CSS：
@CHARSET "ISO-8859-1";
#header
{ position:absolute;
height:40px;
width:100%;
background-color:#D1D3D4;
verticle-align="middle";
left:0;
}
.img1
{
position:relative;
height:13px;
float:right;
padding-right:12%;
}
.p1{
position:relative;
padding-bottom:5%;
padding-left:7%;
width:100%;
}
#main
{
position:absolute;
margin-top:80px;
left:-.3%;
margin-right:2%;
width:98%;
border-right:5%;
}
主要问题是您没有定义98%宽度就定义了宽度，box-sizing: border-box;因此填充将内容推送到可见区域之外。您必须将#maindiv调整为：
#main
{
/* left:-.3%;
margin-right:2%; */
width:100%;
box-sizing: border-box;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句