2

私はこの動的なULを持っており、ページの中央に配置する必要があります。

これが私のHTMLです：

<ul id="nav">
    <li><div class="tabquad">First</div>
        <ul>
            <li><a class="item" href="#"><div class="tabquad">One</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
        </ul>
    </li>
    <li><div class="tabquad">Second</div>
        <ul>
            <li><a class="item" href="#"><div class="tabquad">One</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Four</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Five</div></a></li>
        </ul>
    </li>
    <li><div class="tabquad">Third</div>
        <ul>
            <li><a class="item" href="#"><div class="tabquad">One</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
            <li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
        </ul>
    </li>
</ul>

私のCSS：

.tabquad{
    color:white;
    margin:auto;
    position:relative;
    border:2px solid #000;
    border-color:rgb(82,115,154);
    width:200px;
    height:30px;
    text-align:center;
    padding-top:10px;
    top:25px;
    background-color:rgb(0,56,130);
}
.tabquad:hover{
    background-color:rgb(49,87,132);
    cursor: hand;
}

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    width: 15em;
}

#nav li {
    float: left;
    width: 15em;
}
#nav li ul {
    position: absolute;
    width: 15em;
    left: -999em;
}

.item{
    color:#0E4063;
    text-decoration:none;
}

#nav li:hover ul {
    left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
    left: auto;
}

私のJS：

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

全体を中央に配置するにはどうすればよいですか？

ここでjsfiddleのテストを見つけることができます

編集：すべて私のページの中央に配置された3つの列が必要です。

4

4 に答える 4

8

#nav最初の定義の後にこれを追加します。

#nav {
    width: 45em;
    margin: 0 auto;
}

http://jsfiddle.net/GeraldS/ZGLtn/2/

于 2013-01-31T10:33:59.230 に答える
1

ulに固定幅を与えたくない場合は、outerを追加divしてouter divにul与えますtext-align:center

HTML

     <div class="wrap">
         ul goes here
     </div>

CSS

.wrap{text-align:center}

デモ

于 2013-01-31T10:44:30.853 に答える
0 
#nav {
    width: 45em;
    margin: 0px auto;
    padding: 0px;
    list-style: none;
}
于 2013-01-31T10:50:54.697 に答える
0

左右の余白が自動的に取られるように、UL タグの幅で marginLeft と marginRight 'auto' を使用します。例えば、

ul{
  width: 300px;
  margin: 0 auto; /* This center aligns the ul horizontally */
}
于 2013-01-31T10:39:17.663 に答える