在 VS 的设计模式下，以下代码在一行中包含所有按钮
HTML：
<!-- top -->
<div id="top">
<Label id="validCredentialsMessage" class="float-right" runat="server" ForeColor="Red" Text="" Visible="true"></Label>
<a href="home.aspx" id="logo" class="float-left"><img src="images/logo.png" alt="" /></a>
<div id="top-menu" class="float-right">
<ul class="main">
<li><a id="A1" href="home.aspx" runat="server" class="current"><span>Home</span></a> </li>
<li>
<a href="#"><span>Members</span></a>
<ul class="sub curved">
<li><a href="ratings.aspx">Analysis</a></li>
<li><a href="results.aspx">Results</a></li>
<li><a href="performance.aspx">Performance</a></li>
</ul>
</li>
<li><a href="blog.aspx"><span>Blog</span></a> </li>
<li><a href="contact.aspx"><span>Contact</span></a> </li>
<li><a href="Default.aspx"><span>Account</span></a> </li>
<li><a id="iLogOut" runat="server" onserverclick ="LogOut_Click"><span>LogOut</span></a></li>
</ul>
</div>
</div>
<!-- //top -->
CSS：
/* top menu */
#top-menu {padding:19px 0 0 0;width:560px;}
#top-menu ul {list-style:none;padding:0;margin:0;}
#top-menu .main li, #top-menu .main li a, #top-menu .main li a span {display:block;float:left;cursor:pointer;}
#top-menu .main li a, #top-menu .main li a span {background:url(../images/top-menu-a.jpg) no-repeat 0 0;}
#top-menu .main li {position:relative;padding-bottom:4px;}
#top-menu.float-left .main li {padding-right:10px;}
#top-menu.float-right .main li {padding-left:10px;}
#top-menu .main li a {background-position:top left;padding:0 0 0 20px;color:#656565;}
#top-menu .main li a span {background-position:top right;height:25px;line-height:25px;text-align:center;padding:0 20px 0 0;font-family:LucidaGrandeBold, Arial, sans-serif;}
#top-menu .main li a:hover {background-position:bottom left;}
#top-menu .main li a:hover span, #top-menu .main li a.current span {background-position:bottom right;}
#top-menu .main li a:hover, #top-menu .main li a.current {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a {color:#5790dc;background-position:bottom left;}
#top-menu .main .current-dynamic > a span {background-position:bottom right;}
#top-menu .sub {background:url(../images/top-menu-sub.jpg) repeat-x #fafafa;position:absolute;top:27px;left:10px;padding:15px 20px 10px 20px;border:1px solid #e0e0e0;min-width:110px;display:none;z-index:50;}
#top-menu.float-left .sub {left:0;}
#top-menu .sub li, #top-menu .sub li a, #top-mnu .sub li a span {display:block;float:none;background:none;padding:0;}
#top-menu.float-left .sub li, #top-menu.float-right .sub li {line-height:25px;padding:2px 0;}
#top-menu .sub li a {font-family:LucidaGrandeRegular, Arial, sans-serif;}
/* -- */
但是，在实时运行时，即使有足够的空间，最后一个按钮也会换行。
令人沮丧的是，设计视图看起来是正确的，并且只会实时更改，这使得很难追踪哪些设置有效。请任何人都可以建议一种简单的方法来阻止这些按钮缠绕到新行上吗？