[問題] 請問選單menu的文字置中

看板Web_Design作者 (funny)時間12年前 (2013/10/29 02:50), 編輯推噓1(100)
留言1則, 1人參與, 最新討論串1/1
以此範例@@" http://demonstration.abgne.tw/jquery/0015/0015_1.html 我把色塊寬度拉到100%,但想要讓文字置中,不曉得如何做到。 最終成果是想要像下面該網站這樣, 上方的黑色bar (首頁、jQuery、....在中間這樣) http://ppt.cc/wnxk 請高手幫忙@@"困住了...謝謝^^" 以下是程式碼 <style type="text/css"> #menu { margin: 0; padding: 0; list-style: none; position: relative; width:100%; float: left; background: #000; } #menu li { margin: 0; padding: 0; float: left; border-right: 1px solid #999; } #menu li a { padding: 8px 15px; display: block; color: #fff; text-decoration: none; } #menu li ul { margin: 0; padding: 8px 0; list-style: none; float: left; position: absolute; left: 0; width: 500px; color: #fff; background: #06c url('bottom.gif') no-repeat bottom; display: none; } #menu li ul li { border-right: 1px solid; } #menu li ul li a { display: inline; } #menu li ul li a:hover { text-decoration: underline; } </style> <script type="text/javascript"> $(function(){ // 幫 #menu li 加上 hover 事件 $('#menu>li').hover(function(){ // 先找到 li 中的子選單 var _this = $(this), _subnav = _this.children('ul'); // 變更目前母選項的背景顏色 // 同時淡入子選單(如果有的話) _this.css('backgroundColor', '#06c'); _subnav.stop(true, true).fadeIn(400); } , function(){ // 變更目前母選項的背景顏色 // 同時淡出子選單(如果有的話) // 也可以把整句拆成上面的寫法 $(this).css('backgroundColor', '').children('ul').stop(true, true).fadeOut(400); }); // 取消超連結的虛線框 $('a').focus(function(){ this.blur(); }); }); </script> </head> <body> <ul id="menu"> <li><a href="#">jQuery</a> <ul> <li><a href="#">應用範例</a></li> <li><a href="#">使用技巧</a></li> <li><a href="#">相關資源</a></li> </ul> </li> <li> <a href="#">CSS</a> <ul> <li><a href="#">CSS Hack</a></li> <li><a href="#">免費圖示</a></li> </ul> </li> <li><a href="#">其它網站</a> <ul> <li><a href="#">男丁格爾's 脫殼玩</a></li> <li><a href="#">Google</a></li> <li><a href="#">Yahoo!奇摩</a></li> <li><a href="#">原子小金剛</a></li> </ul> </li> <li><a href="#">新年快樂</a></li> </ul> <div class="a"></div> </body> </html> <nav class="container-stlye clearfloat"> </nav> </div> <div id="wrapper" class="container-stlye clearfloat"> <section id="main"> <div id="content" role="main"> -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 36.224.182.119

10/29 03:08, , 1F
文章代碼(AID): #1IRh80eh (Web_Design)