请问如何调节导航栏的宽度

michaelyang

导航栏的宽度太窄，字都展不开，请问如何调节，英文字符，麻烦详细点。谢谢

limqiang

需要修改模板才可以，模板文件的CSS文件，路径：template\模板文件夹\css\style.css
修改：.navigation li这个部份。

michaelyang

回复 2# limqiang


    是修改这个么？可是改了以后没变化  还是我弄错了？谢谢

.navigation li{float:left; text-align:center; width:160px; position:relative;  z-index:5; font-size:14px;}

limqiang

是的，就是改这个地方，您用的哪一个模板，或是把域名发上来，我打开看看。

michaelyang

回复 4# limqiang


    模板是 ： huagong-100927-a21。 width 原先92， 我已经改成了160。 还是没有变

michaelyang

回复 4# limqiang


    网址是www.cosocos.net。 产品名展不开

mczb

我看您已经修改成功了，导航文字也没重叠，隔的很开了。

产品名不能展开是哪个位置的。

michaelyang

回复 4# limqiang


    现在导航栏到是变宽了，可是产品名还是那个宽度，边框太大，产品名还是展不开

mczb

您指首页的产品名，还是内页的产品名，请发图上来，以确认

mczb

您指首页的产品名，还是内页的产品名，请发图上来，以确认

michaelyang

回复 10# mczb


   


Product Customized 这个边的距离太宽了， 我想一行显示，这个又办法么？ 谢谢

limqiang

：.navigation li开头的，都是导航栏的相关显示的。
您的这个显示，可以修改：
.navigation ul li a, .navigation ul li a:hover {}

您试下。

michaelyang

回复 12# limqiang



  麻烦你帮我改一下吧，我搞来搞去搞了个一塌糊涂，还是没搞明白（--增加字符数）。 原模板css文件如下， 谢谢

1. *--- 导航 ---*/
   
2. #nav{width:980px;height:81px;line-height:81px; margin:0 auto; background:url(../images/nav-bg.png) no-repeat; margin-bottom:8px;}
   
3. .nav_l{ display:none;}
   
4. .nav_r{display:none;}
   
5. .navigation{ padding-left:30px;}
   
6. .navigation li{float:left; text-align:center; width:92px; position:relative; z-index:5; font-size:14px;}
   
7. .navigation li a{ padding:0 10px;}
   
8. .navigation li a,.navigation li a:visited{display: block; text-decoration: none; color: #444;font-weight: bold;}
   
9. .navigation li a:hover, .navigation li.hover a, .navigation li.hover {color: #FFF; text-decoration: none;background: url(../images/menu_hover_bg.gif) repeat-x;}
   
10. .navigation ul{display:none; font-size:12px;}
    
11. .navigation li.hover a:visited { _color:#fff;}
    
12. .navigation ul li{background-image:none;background-color:#098000; line-height:25px;margin:0px; padding: 0px; font-size:12px;}
    
13. .navigation ul li a,.navigation ul li a:hover{background-image:none;color:#444;width:92px; margin:0px; padding: 0px;}
    
14. .navigation li ul { width:92px; display:none; position:absolute; top:73px; left:0px; margin: 0px; padding:0; z-index:8; background-color:#b8e6ff;}
    
15. .navigation li ul ul { left:92px; top:20px; z-index:10; top:0; }
    
16. .navigation li ul li { background-color:#098000; border:0; background-image:none; font-size:12px;}
    
17. .navigation li ul li a { color:#FFF; font-weight:normal; text-align:center; background-image:none;}
    
18. .navigation li ul li a:visited { background-image:none; font-weight:normal; color:#FFF;}
    
19. .navigation li ul li a:hover { color:#fffed5; background-image:none; background:#195000;}
    
20. .navigation li ul li.hover{ background:#195000; background-image:none; width:92px;}
    
21. .navigation li.hover ul a{background-image:none; }
    

复制代码

Ghost

您可以参考、学习下此贴进行尝试。

http://bbs.sitestar.cn/thread-5960-1-1.html

michaelyang

回复 14# Ghost

这个工具好的不得了，谢谢ghost。