我有这个动态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列,所有列都在我的页面中。
答案 0 :(得分:8)
答案 1 :(得分:1)
如果您不想为ul指定固定宽度,请向div
添加外部ul
,并将text-align:center
添加到外部div
<强> HTML 强>
<div class="wrap">
ul goes here
</div>
<强> CSS 强>
.wrap{text-align:center}
<强> DEMO 强>
答案 2 :(得分:0)
使用marginLeft和marginRight'auto'以及UL标签的宽度,以便自动获取左右边距。例如,
ul{
width: 300px;
margin: 0 auto; /* This center aligns the ul horizontally */
}
答案 3 :(得分:0)
#nav {
width: 45em;
margin: 0px auto;
padding: 0px;
list-style: none;
}