Question

在VS的设计模式中，以下代码包含单行上的所有按钮

enter image description here

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;}
/* -- */

然而，即使有足够的空间，当现场直播时，最后一个按钮也会包裹。

enter image description here

令人沮丧的是，设计视图看起来正确并且仅实时更改，这使得难以追踪哪些设置有效。任何人都可以建议一种简单的方法来阻止这些按钮包裹到一个新行上吗？

Answer 1

在你的css的第一行，#top-menu有一个属性width: 560px;，导致按钮换行。

605px周围似乎是最小设置，因为它是按钮所需的空间。

选中jsFiddle。

停止按钮包装到换行符

1 个答案: