我正在为我的客户开发一个网站,我遇到的问题是,每当您调整窗口大小时,导航栏上的按钮都会挤在一起。这个问题的原因对我来说并不明显,所以我来这里寻求帮助。当浏览器窗口最大化时,导航栏对我来说也很好,但对我的客户而言,她在页面中间看到了twitter按钮。我认为这只是分辨率问题,因为她的屏幕比我的屏幕小,但是有没有解决的方法?
网站:
the crue cart
的HTML
ojit_pre
的CSS
@font-face { font-family: chunkfive; src: url("fonts/Chunkfive.otf") format("opentype"); }
<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>
最佳答案
问题是,您没有宽度为100%的固定宽度容器,该位置是液体。
您需要在容器上设置一个宽度,它将很好玩!