Question

我是html和css的新手。我目前正在上html5和css3上课。我们需要为班级创建一个网站。我已经开始创建布局，但我无法将顶部的导航置于页面的中心位置。有一个具有100％背景的UI但是我不能让按钮（文本）居中而不会使UI不再是100％宽度。 ` 这是我的CSS代码：

#horizontalNav {
    display: block;
}


#horizontalNav li {
    float: left;
    margin-left: 13px;
    margin-right: 30px;
}   

#horizontalNav ul {
    overflow: hidden;
    background-color: #003300;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/ *按钮样式* /

#horizontalNav a.navBtn {
    color: #009933;
    font-size: 1.8em;
    text-decoration: none;
    font-family: Impact, Charcoal, sans-serif;
}   

#horizontalNav a.navBtn:hover {
    color: #FFFF99;
}

/ *下拉菜单* /

#horizontalNav ul li:hover ul {
    display: block;
}

#horizontalNav ul ul {
    display: none;
    position: absolute;
    min-width: 150px;
    max-width: 150px;
    padding-top: 2px;
    padding-bottom: 8px;
    margin-left: -10px;
}

#horizontalNav ul ul li {
    display: block;
    clear: both;
}   

#horizontalNav ul ul li a {
    color: #009933;
    font-size: 1.4em;
    font-family: Impact, Charcoal, sans-serif;
    text-decoration: none;
}   

#horizontalNav ul ul li a:hover {
    color: #FFFF99;
}`

Answer 1

正如我的评论所述，你无法将浮动元素居中。使用display: inline-block;

更改

#horizontalNav li {
    float: left;
    margin-left: 13px;
    margin-right: 30px;
}

到

#horizontalNav li {
    display: inline-block;
    margin-left: 13px;
    margin-right: 30px;
}

我需要帮助将包含100％宽度背景的div中的ul项目居中

1 个答案: