如何在CSS中居中的菜单项

时间：2013-07-05 12:13:56

标签： css codeigniter menu

我试图将菜单项置于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>

任何帮助都将不胜感激。

编辑：在建议进行更改后，我现在遇到了另一个问题。当我越过“子菜单”项目时，“子子菜单”项目显示有间隙，从而使它们不可点击。还有什么我需要编辑来解决这个问题吗？

2 个答案:

答案 0 :(得分：0)

将其添加到CSS文件中。

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

margin:auto会根据页面和内容宽度自动居中元素

答案 1 :(得分：0)

在部分应该设置 - margin-left：25％;：

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

}

独立使用此值。

在你的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>
相关问题
最新问题