我已经将css应用到我的页面，当浏览器最大化时看起来很好，但每当我减小浏览器窗口的大小时，元素的流动就会受到干扰：
我的代码如下：
CSS
body{
background:#eff3f6;
border: 1px solid #C3D4DB;
}
.content{margin-top:1px;
margin-right:200px;
margin-left:200px;
background:#fefefe;}
.box
{
background:#fefefe;
border: 1px solid #C3D4DB;
border-top:1px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
-webkit-box-shadow:rgba(0,0,0,0.15) 0 0 1px;
box-shadow:rgba(0,0,0,0.15) 0 0 1px;
color:#444;
font:normal 12px/14px Arial, Helvetica, Sans-serif;
margin:0 auto 30px ;
width:auto;
}
.box.login
{
height:260px;
width:332px;
position:absolute;
left:50%;
top:50%;
margin:-130px 0 0 -166px;
}
.boxBody
{
background:#fefefe;
border-top:1px solid #dde0e8;
border-bottom:1px solid #dde0e8;
padding:10px 20px;
}
.box footer
{
background:#eff4f6;
border-top:1px solid #fff;
padding:22px 26px;
overflow:hidden;
height:32px;
}
.box label
{
display:block;
font:14px/22px Arial, Helvetica, Sans-serif;
margin:10px 0 0 6px;
}
.box footer label{
float:left;
margin:4px 0 0;
}
.box footer input[type=checkbox]{
vertical-align:sub;
*vertical-align:middle;
margin-right:10px;
}
.box input[type=text],
.box input[type=password],
.txtField, textarea,
.cjComboBox,select
{
border:6px solid #F7F9FA;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
margin:3px 0 4px;
padding:8px 6px;
width:270px;
display:inline;
}
.box input[type=text]:focus,
.box input[type=password]:focus,
.txtField:focus, textarea:focus,
.cjComboBox:focus, select:focus
{
border:6px solid #f0f7fc;
-moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
-webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
color:#333;
}
.cjComboBox, select
{
width:294px;
}
.cjComboBox.small, select.small
{
padding:3px 2px 3px 6px;
width:100px;
border-width:3px !important;
}
.txtField.small,textarea:small
{
padding:3px 6px;
width:200px;
border-width:3px !important;
}
.rLink{padding:0 6px 0 0; font-size:11px; float:right;}
.box a{color:#999;}
.box a:hover, .box a:focus{text-decoration:underline;}
.box a:active{color:#f84747;}
.btnLogin
{
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:15px;
background:#a1d8f0;
background:-moz-linear-gradient(top, #badff3, #7acbed);
background:-webkit-gradient(linear, left top, left bottom, from(#badff3), to(#7acbed));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";
border:1px solid #7db0cc !important;
cursor: pointer;
padding:11px 16px;
font:bold 11px/14px Verdana, Tahomma, Geneva;
text-shadow:rgba(0,0,0,0.2) 0 1px 0px;
color:#fff;
-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
margin-left:12px;
float:right;
padding:7px 21px;
}
.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
background:#a1d8f0;
background:-moz-linear-gradient(top, #7acbed, #badff3);
background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";
}
.btnLogin:active
{
text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;
}
footer#main{
position:relative;
left:0;
bottom:10px;
text-align:center;
font:normal 11px/16px Arial, Helvetica, sans-serif;
width:100%;
}
menuli{
background: none;
width: auto;
height: auto;
float: none;
float: none;
width: auto;
line-height: 50px;
background: none;
text-align: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #fff;
list-style-type: none;
width: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
color: #fff;
float: none;
list-style: none;
text-decoration: none;
display: none;
}
HTML
<body>
<table width="100%" height="100%" border="0" align="center"
cellpadding="0" cellspacing="0" bgcolor="#63B8FF">
<tr>
<td width="40%" align="justify"><img
src="/traineeApp/images/Yell.jpg"
style="float: left; position: relative;" alt="Yell Adworks"
title="Yell Adworks" height="50px" /></td>
<td width="30%" style="text-align: center;vertical-align: middle;">
<h2>
<font color=#ffffff >Trainning Information System</font>
</h2>
</td >
<td width="30%" align="center" style="text-align: center;vertical-align: bottom;">Welcome, ! <a
href="/traineeApp/logout.htm"><span style="text-decoration: underline;">Logout</span></a>
</td>
</tr>
</table>
<div class="content" >
<div id="content" style="position:absolute;">
<div id="navigation" >
<div id="nav-lt-curve"><img src="/traineeApp/css/blue-images/blue-lt-curve.png" alt="" width=auto; height="50" /></div>
<div id="navigation-mid" style="width: auto;">
<ul style="width: auto;" id="nav">
<li style="width: 175px; background:none;"><a href="/traineeApp/DashBoard/dashBoard.htm">DashBoard</a></li>
<li style="width: 170px; background:none;"><a href="/traineeApp/CreateTraining/training.htm">Create Training</a></li>
<li style="width: 170px; background:none;"><a href="/traineeApp/CreateFeedBack/feedback.htm">Create FeedBack</a></li>
<li style="width: 170px; background:none;"><a href="/traineeApp/JasperReports/reports.htm">Reports</a></li>
<li style="width: 164px; background:none; display: inline;"><a href="/traineeApp/Customized/customizedproperties.htm">Options</a>
</li></ul>
</div>
<div id="nav-rt-curve">
<img src="/traineeApp/css/blue-images/blue-rt-curve.png" alt="" width="14" height="50" />
</div>
</div>
</div>
<br /><br /><br />
<form id="commonBean" action="submit.htm" method="post">
<div class="content" align="center">
<div class="box">
<br>
<h2>
<label>Training Creation</label></h2>
<label>(<span style="font-style: italic;color: red;">*</span> Mandatory Fields)</label>
<hr>
<table>
<tr><td>
<label><span style="font-style: italic;color: red;">*</span>Training Name: </label>
</td><td>
<input id="trainingName" name="trainingName" type="text" value=""/>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label><span style="font-style: italic;color: red;">*</span>Training Type: </label>
</td>
<td>
<select id="trainingtype" name="trainingtype">
<option value="">--Select--</option>
<option value="internal">Internal</option>
<option value="External">External</option>
</select>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label><span style="font-style: italic;color: red;">*</span>Department Name: </label>
</td>
<td>
<select id="departmentName" name="departmentName"><option value="">--Select--</option>
</select>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label>Trainer Name: </label>
</td>
<td>
<select id="trainerName" name="trainerName"><option value="">--Select--</option>
--%>
</select>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label>Group Name: </label>
</td>
<td>
<select id="group" name="group"><option value="">--Select--</option>
</select>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label><span style="font-style: italic;color: red;">*</span>Starting Date: </label>
</td><td>
<input id="trFrom" name="trFrom" type="text" value=""/>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
<label><span style="font-style: italic;color: red;">*</span>Ending Date: </label>
</td><td>
<input id="trEnd" name="trEnd" type="text" value=""/>
<span style="font-style: italic;color: red;"></span>
</td></tr>
<tr><td>
</table>
<br>
<input type="submit" value="Submit" class="btnLogin" style="align:center; float:none;"/>
<input type="button" value="Reset" class="btnLogin" style="align:center; float:none;" onclick="window.location.href='training.htm'"/>
<br><br>
</div>
</div>
</form>
</div>
</body>
答案 0 :(得分：2)
你的CSS有很多问题，如：
1）我想你想在浏览器中间对齐你的div.content 因此
margin-right:200px;
margin-left:200px;
这不是标准方式，而是这样：
body{
background:
border:
..........
margin:0 auto;
text-align:center;
}
.content{
margin:0 auto;
margin-top:5px;
//don't include margin-left or margin-right instead set a width for the div
width:800px;
.............
}
根据为div.content设置的宽度设置其他元素的宽度.....
答案 1 :(得分：1)
正如@mukund所提到的 - 主要问题在于.content的CSS以及你试图将其集中的方式。
尝试将CSS更改为以下内容：
body{
background:#eff3f6;
border: 1px solid #C3D4DB;
text-align: center; /* added this to center any children */
}
.content{
margin-top:1px;
display: inline-block; /* this is key */
*display: inline;
*zoom: 1;
background:#fefefe;
}
注意：为IE7支持添加了*display: inline;和*zoom: 1;