Question

我有一个菜单，我不能将ul放在second_nav中。这个菜单出了什么问题？

这是我常规的第二个导航

    /*second_nav*/
#second_nav{
    background: url("images/second_nav.png");
    height: 255px;
    width: 100%;
}
#second_nav ul{
    display: block;
    margin: 0 0 0 170px;
    width: 654px;
    position: absolute;
    padding: 25px 0 0 0;
}
#second_nav ul li{
    display: block;
    float: left;
    margin: 0 0 0 60px; 
    height: 220px;

}
#second_nav ul li p{
    font-size: 20px;
    font-weight: 300;
    color: #000000; 
    text-align: center;
    width: 80px;
    margin: 0 auto;
}

这是我的second_nav，当屏幕是max-820px时，我想把它放在中心位置。

#second_nav{
        height: 255px;
        width:100%;.
        margin: 0 auto;
    }
    #second_nav ul{
        height: 215px;
        margin: 0 auto;
        text-align: center;
    }
    #second_nav ul li{
        margin: 0 auto;
        display: inline-block;
    }
    #second_nav ul li img{
        width: 80%;
    }

Answer 1

给#second_nav ul一个明确的宽度。如果没有一个，那么它就是它的父级（#second_nav）的100％，所以没有任何一个空间可以使用margin: auto将它居中。

试试这个：

#second_nav ul {
    height: 215px;
    width: 500px; /* or whatever you need... */
    margin: 0 auto;
}

Answer 2

您只需添加以下规则

#second_nav ul {
    width: 250px;
    margin: 0 auto;
}

查看 this example

Answer 3

您可以查看：

   #second_nav{
            height: 255px;
            width:100%;  
            text-align:center;
        }

使用text-align: center; 但是ul需要是内联元素“display：inline”

Answer 4

我没有说过的一件事。这是我正常的第二个导航

    /*second_nav*/
#second_nav{
    background: url("images/second_nav.png");
    height: 255px;
    width: 100%;
}
#second_nav ul{
    display: block;
    margin: 0 0 0 170px;
    width: 654px;
    position: absolute;
    padding: 25px 0 0 0;
}
#second_nav ul li{
    display: block;
    float: left;
    margin: 0 0 0 60px; 
    height: 220px;

}
#second_nav ul li p{
    font-size: 20px;
    font-weight: 300;
    color: #000000; 
    text-align: center;
    width: 80px;
    margin: 0 auto;
}

这是我的second_nav，当屏幕是max-820px时，我想把它放在中心位置。

#second_nav{
        height: 255px;
        width:100%;.
        margin: 0 auto;
    }
    #second_nav ul{
        height: 215px;
        margin: 0 auto;
        text-align: center;
    }
    #second_nav ul li{
        margin: 0 auto;
        display: inline-block;
    }
    #second_nav ul li img{
        width: 80%;
    }

无法居中这个ul

4 个答案: