我如何在CSS中菜單項中心

我試圖將菜單項居中在CSS中。酒吧佔據了整個屏幕的寬度，這是一個理想的結果。我希望菜單項相對於屏幕居中。我如何在CSS中菜單項中心

下面是即時通訊使用CSS：

#cssmenu ul, 
#cssmenu li, 
#cssmenu span, 
#cssmenu a { 
    margin: 0; 
    padding: 0; 
    position: relative; 

} 
#cssmenu { 
    height: 49px; 
    border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
    -webkit-border-radius: 5px 5px 0 0; 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    border-bottom: 2px solid #0fa1e0; 
} 
#cssmenu:after, 
#cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 
#cssmenu a { 
    background: #141414; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
    background: -moz-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414)); 
    background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -o-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: -ms-linear-gradient(top, #32323a 0%, #141414 100%); 
    background: linear-gradient(to bottom, #32323a 0%, #141414 100%); 
    color: #ffffff; 
    display: inline-block; 
    font-family: Helvetica, Arial, Verdana, sans-serif; 
    font-size: 12px; 
    line-height: 49px; 
    padding: 0 20px; 
    text-decoration: none; 
} 
#cssmenu ul { 
    list-style: none; 
} 
#cssmenu > ul { 
    float: left; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu > ul > li:hover:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #0fa1e0; 
    margin-left: -10px; 
} 
#cssmenu > ul > li:first-child > a { 
    border-radius: 5px 0 0 0; 
    -moz-border-radius: 5px 0 0 0; 
    -webkit-border-radius: 5px 0 0 0; 
} 
#cssmenu > ul > li:last-child > a { 
    border-radius: 0 5px 0 0; 
    -moz-border-radius: 0 5px 0 0; 
    -webkit-border-radius: 0 5px 0 0; 
} 
#cssmenu > ul > li.active > a { 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
} 
#cssmenu > ul > li:hover > a { 
    background: #070707; 
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
    background: -moz-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707)); 
    background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -o-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: -ms-linear-gradient(top, #26262c 0%, #070707 100%); 
    background: linear-gradient(to bottom, #26262c 0%, #070707 100%); 
    box-shadow: inset 0 0 3px #000000; 
    -moz-box-shadow: inset 0 0 3px #000000; 
    -webkit-box-shadow: inset 0 0 3px #000000; 
} 
#cssmenu .has-sub { 
    z-index: 1; 
} 
#cssmenu .has-sub:hover > ul { 
    display: block; 
} 
#cssmenu .has-sub ul { 
    display: none; 
    position: absolute; 
    width: 200px; 
    top: 100%; 
    left: 0; 
} 
#cssmenu .has-sub ul li { 
    *margin-bottom: -1px; 
} 
#cssmenu .has-sub ul li a { 
    background: #0fa1e0; 
    border-bottom: 1px dotted #6fc7ec; 
    filter: none; 
    font-size: 11px; 
    display: block; 
    line-height: 120%; 
    padding: 10px; 
} 
#cssmenu .has-sub ul li:hover a { 
    background: #0c7fb0; 
} 
#cssmenu .has-sub .has-sub:hover > ul { 
    display: block; 
} 
#cssmenu .has-sub .has-sub ul { 
    display: none; 
    position: absolute; 
    left: 100%; 
    top: 0; 
} 
#cssmenu .has-sub .has-sub ul li a { 
    background: #0c7fb0; 
    border-bottom: 1px dotted #6db2d0; 
} 
#cssmenu .has-sub .has-sub ul li a:hover { 
    background: #095c80; 
}

而且，這裏是利用即時通訊與它一起的HTML代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="menu_assets/styles.css" rel="stylesheet" type="text/css"> 
    <link href="<?php echo base_url(); ?>menu_assets/styles.css" rel="stylesheet" type="text/css" /> 


    <div id='cssmenu'> 
<ul> 
    <li class='active'><a href='sample/home'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Upload Data</span></a> 
     <ul> 
     <li class='has-sub'><a href='sample/index'><span>Test Data</span></a> 
      <ul> 
       <li><a href='upload_form_att/index'><span>With Attachments</span></a></li> 
       <li class='last'><a href='sample/index'><span>Without Attachments</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Protocol</span></a> 
      <ul> 
       <li><a href='#'><span>With Attachments</span></a></li> 
       <li class='last'><a href='#'><span>Without Attachments</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>Stability Data table</span></a></li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Logout</span></a></li> 
</ul> 
</div> 
</head>

任何幫助，將不勝感激。

編輯：建議更改後，我現在遇到了另一個問題。當我將鼠標指向「子菜單」項目時，「子子菜單」項目會顯示一個間隙，從而使它們不可點擊。還有什麼我需要編輯來解決這個問題？

來源

2013-07-05 chris

在部分應設置自動居中元素。

在你的HTML代碼是一個錯誤：沒有標籤和網站主體放置在標籤你的HTML代碼更正：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link href="menu_assets/styles.css" rel="stylesheet" type="text/css"> 
    <link href="styles.css" rel="stylesheet" type="text/css" /> 

</head> 
<body> 
    <div id='cssmenu'> 
<ul> 
    <li class='active'><a href='sample/home'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Upload Data</span></a> 
     <ul> 
     <li class='has-sub'><a href='sample/index'><span>Test Data</span></a> 
      <ul> 
       <li><a href='upload_form_att/index'><span>With Attachments</span></a></li> 
       <li class='last'><a href='sample/index'><span>Without Attachments</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Protocol</span></a> 
      <ul> 
       <li><a href='#'><span>With Attachments</span></a></li> 
       <li class='last'><a href='#'><span>Without Attachments</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>Stability Data table</span></a></li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Logout</span></a></li> 
</ul> 
</div> 
</body> 

</html>

來源

2013-07-05 12:57:12 nikant25

非常感謝。那就是訣竅。 – chris

現在又進入另一個問題。當我將鼠標指向「子菜單」項目時，「子子菜單」項目會顯示一個間隙，從而使它們不可點擊。還有什麼我需要編輯來解決這個問題？ – chris

將此項添加到CSS文件。 25％;:

#cssmenu ul { 
    list-style: none; 
    margin-left: 25%; 

}

獨立玩弄這個值：保證金左 -

#cssmenu{ 
    width:90%; //set according to you 
    margin:auto; 
}

margin:auto根據頁面和內容寬度

來源

2013-07-05 12:16:38

謝謝。這並沒有解決問題。但是，從中得到了一些必要的東西。 – chris

我如何在CSS中菜單項中心

回答

相關問題