0

要素を中央に配置する方法を見つけようとして、このコードを 1 時間半ほどいじりました。私の div は ul または li に影響を与えていないようで、中央に配置する方法がわかりません。私は決してプロではありません.水平であること]。誰か助けてください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に、次の2行を追加します。

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 に答える