-2
我需要居中這個菜單,所以當瀏覽器正在調整大小它不與身體「uncenter」。我一直在試圖弄清楚這一點,它只是難倒了我。我需要身體和菜單保持在一起,當瀏覽器被調整大小時,並始終保持中心位置。保持我的身體和菜單集中在一起
HTML的
<div id="logo">
<a href="KJ's Ski Store Home.html"><img src="Ski Store Logo.png" alt="logo" height="85" width="85"/></a>
</div>
<div id="nav">
<ul>
<li><a href="KJ's Ski Store Home.html">Home</a></li>
<li>
<a href="KJ's Ski Store Home.html">Store</a>
<ul id="subnav">
<li><a href="snowboards.html">Snowboards</a></li>
<li><a href="boots.html">Boots</a></li>
<li><a href="helmets.html">Helmets/Hats</a></li>
<li><a href="goggles.html">Goggles</a></li>
</ul>
</li>
<li><a href="location.html">Location</a></li>
<li><a href="location.html">Contact Us</a></li>
</ul>
</div>
div style="float: left; width: 400px; height: 400px; margin-left: 5%;">
<img alt="slide" src="slideshow1.jpg" name="slide" width="400" height="400"/>
</div>
<div style="float: left; width: 15%;"></div>
<div id="battle" style="float: left; width: 40%;">
<h1>Snowboarding or Skiing</h1>
<p> "<strong>Snowboarding has been better than skiing since it was invented</strong> and nothing has changed
with that in the last, roughly, 30 years. Skiers and snowboarders get along these days,
share the slopes and even ride together, but snowboarding is still a superior sport. It's
mellow that you followed us into the world of freestyle riding and we're happy to share
our terrain parks and half pipes with you. We even let you hit our jibs. We don't mind
that skiers rode our coattails into the X Games and now even the Olympics (I'm talking
freestyle skiing here.) We're totally down with you guys and gals even if you are
two-plankers. Nevertheless, snowboarding will always be on top."</p>
<h4>Brad Farmer, Fuel T.V.</h4>
</div>
CSS-
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#nav a:link{
color: #000000;
}
#nav a:visited{
color: #000000;
}
#nav a:hover{
color: #ffffff;
}
#nav a:active{
color: #000000
}
#nav a{
text-decoration: none;
}
#subnav a:link{
color: #ffffff;
}
#subnav a:visited{
color: #ffffff;
}
#subnav a:hover{
color: #ffffff;
}
#subnav a:active{
color: #ffffff;
}
ul{
display: inline-flex;
}
#logo{
text-align: center;
}
#battle h1{
text-align: center;
}
#battle p{
text-align: center;
}
是否嘗試使用margin:0 auto;在身體的CSS? – Keith
這與你最後一個問題有什麼不同:http://stackoverflow.com/questions/20499187/centering-my-body-to-the-menu-and-the-rest-of-the-page? – j08691
保證金:0汽車沒有工作......我編輯了最後一個問題。我真的需要這樣做,而且我知道如果我只是再次發佈一個,它會幫助它儘早得到答案。 – KStahljr