Question

我想将菜单移到中间位置。我怎么能这样做？

我试图改变浮动，但它没有用。

ul#menu {
    float:left;
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
    background-color:#D60024;
}

ul#menu > li {
    float:left;
    display:inline;
    position:relative;
    padding:3px;
    border:1px #8a0505 solid;
    background-color:#D60024;
    color:white;
}

ul#menu > li:hover {
    background:#8a0505;
    color:white;
}

ul#menu > li:hover ul {
    opacity:1;
    left:0;
    height:auto;
}

ul#menu li ul {
    position:absolute;
    float:left;
    width:100px;
    height:0;
    padding: 5px 5px 5px 0;
    margin:0;
    opacity:0;
}

ul#menu ul li {
    background-color:#D60024;
    border:1px #8a0505 solid; 
}

ul#menu ul li:hover {
    background:#8a0505;
    border:1px #8a0505 solid;
    color:white;
}

JSFiddle

编辑：我想要这样，但两侧的高度相同。通过填充解决它：4px;在ul＃menu上。

JSFiddle2

Answer 1

我想你可以尝试一下。

fiddle

我删除ul#menu浮动和背景，然后添加text-align

ul#menu {
    text-align:center;
    width:100%;
    margin:0;
    padding:0;
    list-style-type:none;
    /* background-color:#D60024; */
}

我也删除了ul#menu > li float:left

希望能帮到你。

Answer 2

我建议尝试css menu builder，有许多布局和漂亮的菜单设计。

将菜单移至中间

2 个答案: