如何正确使用CSS派生选择器

0 0

如何正确使用CSS派生选择器5

我在学习一个下拉菜单的时候遇到了这个问题.
整个菜单无法居中.

<div class="center_holder">
        <div style="margin: 0 auto; width: 410px; text-align: center;">
       <ul class="menu"> 
                <li><a href="#">首页</a>
                <ul>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                    </ul>
        </div>
    </div>

.center_holder {
    padding-top: 20px;
    margin: 0 auto;
    min-width: 500px;
    max-width: 1100px;
    text-align: center;
}

.menu {
    height: 40px;
    width: 610px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}

然后我试图在menu中添加margin-left: auto; margin-right: auto;无果.
又试图在center_holder中添加.
最后试图在menu ul中使用,还是无果.

2013年6月20日 08:56

TimePower
15
0 0 4

1个答案按时间排序按投票排序

0 0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<style>
.center_holder {
    padding-top: 20px;
    margin: 0 auto;
    min-width: 500px;
    max-width: 1100px;
    text-align: center;
}

.menu {
    height: 40px;
    width: 610px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
 
    opacity: 0;
    background: #1f2024;
 
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
 
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.menu li{
list-style-type:none;
display:inline;
}
</style>
 <BODY>
  <div class="center_holder">
        <div style="margin: 0 auto; width: 410px; text-align: center;margin-left: auto;margin-right: auto">
       <ul class="menu"> 
                <li><a href="#">首页</a>
				
               
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                        <li><a href="#">test</a></li>
                 </ul>
        </div>
    </div>
 </BODY>
</HTML>

2013年6月20日 13:29