这里有一个网页。如果更改浏览器窗口的大小，则会发生这种情况：http://gyazo.com/1be5c2f9aae817d0fa2603a51bea5d37并且浏览器窗口越小，两个横幅元素越靠近中心。
我想知道是否有人可以在更改浏览器窗口大小时阻止这两个元素向中心移动，以使它们类似于该站点上的绿色和蓝色框：https://woodycraft.net/home/
这是我的CSS样式表：
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {background:url('E:/Documents/CRAFT412-Website/images/SiteBackground.png');
background-repeat: no-repeat;
background-attachment: fixed;}
#wrapper {width: 1000px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1px 5px;}
/*TOP BANNER SECTION*/
#logo {margin-top: -90px;
margin-bottom: -95px;
text-align: center;}
#ip {float: left;
margin-left: 458px;
margin-top: -55px;}
#ip_text {float: left;
margin-left: 449px;
margin-top: -51px;
color: white;
font-size: 15px;}
#teamspeak_logo {float:right;
margin-right: 450px;
margin-top: -55px;}
这是该页面的HTML：
<!DOCTYPE HTML>
<html>
<head>
<title>CRAFT412 - Rules</title>
</head>
<!--PAGE LINKS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/rules.css" rel="stylesheet" type="text/css" media="screen">
<!--HTML FOR ALL PAGES-->
<!--BODY SECTION-->
<body>
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip">
<img class="top" src="images/CRAFT412 - Box - IP.png" alt="IP">
</div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_logo">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK"></a>
</div>
</div>
<!--WRAPPER SECTION-->
<div id="wrapper">
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html">Home</a>
</li
><li><a href="status.html">Status</a>
</li
><li><a href="info.html">Info</a>
</li
><li><a href="">Gamemodes</a>
<ul>
<li><a href="survival.html">Survival</a>
</li
><li><a href="pure-pvp.html">Pure-PVP</a>
</li
><li><a href="gamesworld.html">Gamesworld</a>
</li>
</ul>
</li
><li><a href="rules.html" class="active-page">Rules</a>
</li
><li><a href="vote.html">Vote</a>
</li
><li><a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!--RULES CONTENT-->
<div id="rules_title">
<h3>RULES</h3>
</div>
<div id="global_rules_info">
<h3>GLOBAL RULES</h3>
<p>Global rules follow across the entire server</p>
<p>All players are expected to comply to all of the listed rules or they will be muted, kicked, timed out or banned</p>
</div>
<div id="global_rules">
<h4>Rule listing:</h4>
<ul>
<li>No griefing</li>
<li>No flying. (Unless you've been given a high enough rank)</li>
<li>No unauthorized mod usage</li>
<li>No hacked clients</li>
<li>No cheating</li>
<li>Show all other players respect. Including staff</li>
<li>No begging for rank</li>
</ul>
<p>All rules are enforced by staff in a strict manner</p>
</div>
<div id="punishments">
<h4>Punishments can include:</h4>
<ul>
<li>Privilages taken away</li>
<li>Mutes</li>
<li>Prison (Survival)</li>
<li>Temporary bans</li>
<li>Permanent bans</li>
<li>IP bans</li>
</ul>
</div>
<div id="survival_rules_title">
<h3>SURVIVAL RULES</h3>
</div>
<div id="survival_rules">
<h4>Rule listing:</h4>
<ul>
<li>Global rules</li>
<li>Don't build to close to other peoples creations, keep a reasonable distance</li>
<li>No begging for materials</li>
</ul>
</div>
</div>
<!--HTML FOR ALL PAGES-->
<!--BOTTOM FOOTER SECTION-->
<div id="bottom_footer">
<div id="created_by">
<p>© 2015 GR412</p>
</div>
<div id="social_media_youtube">
<a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
</div>
<div id="social_media_twitch">
<a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
</div>
<div id="social_media_twitter">
<a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
</div>
<div id="social_media_facebook">
<a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
</div>
</div>
</body>
</html>
最佳答案
我想您想防止按钮向中心移动？
#ip_text {float: left;
margin-left: 449px; // Try remove this
margin-top: -51px;
color: white;
font-size: 15px;
}
#teamspeak_logo {float:right;
margin-right: 450px; // Try remove this
margin-top: -55px;
}