导航栏自动分为两行

时间：2013-08-21 17:58:52

标签： html css3

如何让导航栏保持一行？

enter image description here 

 /*--------------------------------------------------------
        2.Menu
    --------------------------------------------------------*/

        .menu{font:12px JosefinSans;line-height:15px;letter-spacing:1px;min-height:85px;position:absolute;z-index:1001;background-color:#df32b4;text-transform:uppercase;text-align:center; display: inline-block;}
        .menu-style{color:#a474a5;text-decoration:none;-webkit-transition:all 0.20s ease-in-out;-moz-transition:all 0.70s ease-in-out;-o-transition:all 0.70s ease-in-out;-ms-transition:all 0.70s ease-in-out;padding:5px;}
        .menu-style:hover{padding:15px 5px;color:#2a1131;background:#ffffff;/**/}
        .selected{padding:15px 5px;color:#252525;/*background:#fafafa;*/}
        #top{position:absolute;z-index:5001;background:#fff ;}<!--url(../_images/top.png) no-repeat center 10px;padding-bottom:40px-->
        .menu{letter-spacing:10px;border-right:1px solid #dedede;border-left:1px solid #dedede;}
        #menu{display:inline-block;text-transform:uppercase;margin:auto;padding-top:100px;/*min-height:48px;padding-top:26px;*/font-size:14px;line-height:150%;}
        #menu li{display:inline;margin-left:5px;}


<body>
    <center>
        <ul id="menu">
            <li><a href="index.htm" class="menu-style not-this">Home</a></li>
            <li><a href="our-story.htm" class="menu-style not-this">Venue</a></li>
            <li><a href="photos.htm" class="menu-style not-this">Getting to venue</a></li>
            <li><a href="out-of-towners.htm" class="menu-style not-this">Accommodation</a></li>
            <li><a href="thank-you.htm" class="menu-style not-this">Schedule</a></li>
            <li><a href="registry.htm" class="menu-style not-this">Wedding list</a></li>        
            <li><a href="rsvp.htm" class="menu-style not-this">RSVP</a></li>
            <li><a href="events.htm" class="menu-style not-this">About Denia</a></li>               
        </ul>
   </center>
</body>

1 个答案:

答案 0 :(得分：2)

增加父级容器的宽度，或减少一些填充大小。

相关问题
最新问题