Navbar不是内联的

Question

我再次遇到导航栏问题，因为我必须更改代码等因为导航条代码覆盖了页面上的其他内容，但无论如何Nvigation文本不是内联的，我发现即使经过一段时间内它也难以内联研究我无法找到答案..

我的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

我建议您进行以下更改。

1. 将flexbox属性添加到.navbar类
2. 将align-items属性中心添加到.navbar类 - 将对齐所有项目菜单
3. 摆脱显示：所有你的内联块

.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 Kyle！

问题在于你的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!
}

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

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

Answer 4

我在pastebin中检查了你的CSS。我补充道

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

你也可以删除text-align:center属性