我正在为我的一个客户开发一个站点，我遇到的问题是每当您调整窗口大小时，导航栏上的按钮都会挤在一起。问题的原因对我来说并不明显，所以我来这里寻求帮助。当浏览器窗口最大化时，导航栏对我来说也很好，但对我的客户来说，她会在页面中间看到 Twitter 按钮。我认为这只是一个分辨率问题，因为她的屏幕比我的小，但有没有办法解决这个问题？
网站:
the crue cart
HTML
<pre><code> <title>the crue cart</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><div id="logo">
<h1 class="thecruecart">the crue cart
<img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
<h1 class="wholesnackerie">whole snackerie<h1>
</div></li>
<!--Who What When Where Why Help!-->
<li class="navigation"><a href="home.html" class="navigation">Who<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhat.html" class="navigation">What<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhenwhere.html" class="navigation">When & Where<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhy.html" class="navigation">Why<span class="green">?</span></a></li>
<li class="navigation"><a href="help.html" class="navigation">Help<span class="green">!</span></a></li>
<li class="navigation"><a href="order.html" class="navigation">ORDER<span class="green">!</span></a></li>
<li class="navigation"><div id="share">
<iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.twitter.com/thecruecart" data-text="Check out The Crue Cart!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div></li>
</ul>
</div>
<div id="navbar"></div>
<div id="title">
<h2 class="title">Catering? Hungry?</h2>
</div>
<div id="body">
<p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
<br/>
<p>Want to chat? <span class="chunky">Email us: hello@thecruecart.com</span></p>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<p class="ft">© the crue cart 2010. All Rights Reserved.</p>
</div>
</body>
</code></pre>
CSS
<br/>
@font-face {
font-family: chunkfive;
src: url("fonts/Chunkfive.otf") format("opentype");
}
@font-face {
font-family: aller;
src: url("fonts/aller.ttf") format("truetype");
}
@font-face {
font-family: tgheros;
src: url("fonts/tgheros.otf") format("opentype");
}
@font-face {
font-family: tgheros-bold;
src: url("fonts/tgheros-bold.otf") format("opentype");
}
html {}
body {
width:auto;
height:100%;
background-color:#ffffff;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
h1, h2, h3, h4, h5, h6 {
font-family:chunkfive;
color:#0000ff;
margin:0px;
}
h1 {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin:0px;
padding:0px;
}
h1.thecruecart {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin-left:auto;
}
h1.wholesnackerie {
font-family:chunkfive;
color:#44aa00;
font-size:15px;
margin-left:40px;
}
h2.title {
font-size:35px;
margin-top:10px;
margin-left:10px;
}
h2 a{
font-size:35px;
color:#44aa00;
margin-top:10px;
margin-left:10px;
}
img {
margin:0px;
}
img.leaf {
position:relative;
top:2px;
left:-8px;
}
p {
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.order{
font-family:tgheros-bold;
font-size:16px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.facebook {
display:inline;
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:5px;
}
p.ft {
color:#0000ff;
font-family:chunkfive;
font-size:14px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
a {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
text-decoration:none;
margin:0px;
padding:0px;
}
a:link, a:visited, a:hover, a:active {
}
a.navigation {
color:#0000ff;
font-family:chunkfive;
font-size:20px;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0px;
padding:0px;
}
li {
float:left;
}
li.navigation{
display:inline;
position:relative;
top:33px;
float:left;
margin-left:45px;
}
iframe {
display:inline;
margin-top:0px;
margin-left:10px;
}
/*Facebook Stuffs*/
/*Twitter Stuffs*/
.chunky {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
.green {
color:#44aa00;
}
.clearfooter {
height:1px;
clear:both;
}
#container {
min-height:100%;
margin-bottom: -20px;
position: relative;
}
#header {
display:block;
width:auto;
height:58px;
padding-right:5px;
padding-left:5px;
}
#logo {
margin-top:0px;
margin-left:10px;
}
#navbar {
display:block;
width:auto;
height:2px;
background-color:#0000ff;
}
#share {
display:inline;
margin:0px;
}
#body {
width:1330px;
margin:0px;
margin-bottom:30px;
padding:0px;
}
#footer {
display:block;
width:auto;
height:10px;
position:realtive;
text-align:center;
clear:both;
}</code>
最佳答案
问题是，您没有固定宽度的容器，您的宽度为:100%，网站是流动的。
你需要在容器上设置一个宽度，它会很好玩!
关于html - CSS/HTML 导航栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5212929/