0

我一直在摆弄这段代码一个半小时，只是想弄清楚如何使元素居中。我的 div 似乎不影响 ul 或 li，我不知道如何将其居中。我无论如何都不是专业人士，这是我在网上找到的一些免费代码以及我由朋友提供的一段 javascript，以使其完全符合我的要求，这是一个水平下拉列表 [还有子菜单水平]。请有人帮助TT

在这里查看我现在得到的内容的实时预览

这是代码

<style>
body {
   font: 80%/1.2 Arial, Helvetica, sans-serif; }
#navbar {
   position: inherit;
   top: 0;
   margin: 0 auto;
   padding: 0;}
#navbar li {
   list-style: none;
   float: left;}
#navbar li a {
   display: inline;
   padding: 3px 8px;
   text-transform: uppercase;
   text-decoration: none; 
   color: #999;
   font-weight: bold;
   text-align:center }
#navbar li a:hover {
   color: #000; }
#navbar li ul {
   display: none;  }
#navbar li:hover ul, #navbar li.hover ul {
   position: absolute;
   display: inline;
   left: 0;
   width: 100%;
   margin: 0;
   padding: 0; }
#navbar li:hover li, #navbar li.hover li {
   float: left; }
#navbar li:hover li a, #navbar li.hover li a {
   color: #000; }
#navbar li li a:hover {
   color: #357; }

</style>

<script>
sfHover = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
  sfEls[i].onmouseover=function() {
     this.className+=" hover";
  }
  sfEls[i].onmouseout=function() {
     this.className=this.className.replace(new RegExp(" hover\\b"), "");
  }
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
  <ul id="navbar">
<li><a href="#">Exhibits and Events</a>
        <ul>
           <li><a href="#">Current Exhibit</a></li>
           <li><a href="#">Coming Exhibit</a></li>
           <li><a href="#">Events</a></li>
        </ul>
     </li>
     <li><a href="#">About Us</a>
        <ul>
           <li><a href="#">About 1</a></li>
           <li><a href="#">About Two</a></li>
           <li><a href="#">Third About</a></li>
        </ul>         
     </li>
     <li><a href="#">Contact</a>
        <ul>
           <li><a href="#">Via Email</a></li>
           <li><a href="#">Stalk Us Elsewhere</a></li>
        </ul>         
     </li>
     <li><a href="#">Press</a>
        <ul>
           <li><a href="#">Bench Press</a></li>
           <li><a href="#">Military Press</a></li>
           <li><a href="#">Press 'n Seal</a></li>
        </ul>         
     </li>
  </ul>
</body>
</html>
4

2 回答 2

0

在您的 CSS 代码 #navbar 中，添加以下两行：

text-align:center;
margin: 0 auto;

这应该够了吧。

于 2012-07-25T04:09:55.517 回答
0

当你设置margin: 0 auto;你也应该设置width: ...

尝试这个：

#navbar {
    position:relative;
    width: 500px;
    margin: 0 auto;
    padding: 0;
}

对于子菜单：

#navbar li ul {
    display: none;
    position:absolute;
    top: 1.5em;
}
于 2012-07-25T06:45:19.130 回答