中心下拉

Question

我目前正在学习CSS并试图将代码集中在这里：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

我尝试过inline-block和text-align：center的组合，但我无法将其置于中心位置，因此“Home”，“News”，“Dropdown”和“Link”都居中而不是向着左

有人可以解释我做错了什么吗？谢谢你，希望你度过了一个宁静的周末！

Answer 1

由于Elements有一个float：left属性你无法居中，需要根据需要更改css

试试这个新的CSS

CSS

.container {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
    text-align:center;

}

.container a {
    display:inline-block;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
   display:inline-block;
    overflow: hidden;
    vertical-align:middle;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}