Question

我再次遇到导航栏问题，因为导航栏代码覆盖了页面上的其他内容，因此我不得不更改代码ect，但是无论如何导航文本都不是内联的，我发现即使连入也很难经过一番研究之后，我无法找到答案。

我的HTML代码：

<div class="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <div class="dropdown">
        <button class="dropbtn">Dropdown 
            <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div> 
</div>

我的CSS代码：

.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center
}

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

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

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    display: inline-block;
}

.navbar 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: center;
}

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

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

Answer 1

我建议您进行以下更改。

将flexbox属性添加到您的.navbar类中
将align-items属性中心添加到您的.navbar类-将对齐所有项目菜单
摆脱显示：在所有

.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
			display: flex;
	align-items: center;
}
 
.navbar a {
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
// .dropdown {
//     display: inline-block;
//     overflow: hidden;
// }
 
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    //display: inline-block;
}
 
.navbar 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: center;
}
 
.dropdown-content a:hover {
    background-color: #ddd;
}
 
.dropdown:hover .dropdown-content {
    display: block;
}

Answer 2

您需要将.navbar a进行内联阻止或阻止。默认情况下，a是内联的，因此不会应用填充。

.navbar a {
    display: inline-block;
    font-size: 16px;
    ...
}

Answer 3

欢迎来到StackOverflow凯尔！

问题在于vertical-align CSS类声明中没有.dropdown .dropbtn样式声明。如下所示添加它：

.dropdown, .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    display: inline-block;
    vertical-align: middle; // Add this!
}

您还需要在类之间添加逗号，以确保将样式应用于两个类声明！

这是指向代码笔的链接，您可以在其中查看结果：
https://codepen.io/mikeabeln_nwea/pen/pxaMKV

Answer 4

我在pastebin中签出了您的CSS。我加了

.navbar { display:flex; justify-content:center; }

，您还可以删除text-align:center属性

导航栏不是内联的

4 个答案: