DedeCMS 導航欄縮短居中 CSS 修改教程

問題現象

DedeCMS 5.3 發布後，眾多用戶反饋默認導航欄過長、視覺效果不佳，亟需縮短並居中顯示。

修改方案

打開模板目錄下的樣式文件：templets/style/dedecms.css

修改 1：導航容器 .header .nav

.header .nav {
    width: 960px;        /* 原 width: 100% */
    height: 32px;
    margin: 0 auto;       /* 新增：水平居中 */
    background: url(../images/nav-bg.gif) repeat-x;
    clear: both;
    overflow: hidden;
}

修改 2：搜索容器 .header .search

.header .search {
    width: 960px;        /* 新增固定寬度 */
    margin: 0 auto;       /* 新增：水平居中 */
    height: 40px;
    background: url(../images/search-bg.png) repeat-x;
    clear: both;
}

效果驗證

保存 CSS 文件，刷新前台頁面，導航欄與搜索框將以 960px 固定寬度水平居中顯示，視覺效果更加緊湊美觀。若需適配不同寬度佈局，可將 960px 調整為站點主容器寬度。