我这里有一个网页。如果我改变浏览器窗口的大小，则会发生这种情况：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>
答案 0 :(得分：0)
我认为你想让按钮不向中心移动？
#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;
}