这里我有一个下拉菜单/导航栏,我如何让图像与“下拉”“新闻”“主页”按钮在同一行?图像不应该与它们在同一行吗?因为图像已经被放置在导航栏的同一个类下。
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: right;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* style the logo */
.logo-container {
height: 50px;
display: flex;
align-items: center;
}
.logo {
height: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="navbar">
<div class="logo-container">
<img src="https://www.logomaker.com/wpstatic/uploads/2021/10/LogoMaker.jpg" alt="Avolution Software Logo" class="logo">
</div>
<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>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
2条答案
按热度按时间pjngdqdw1#
为了实现你想要的,你可以使用
flex
或grid
,你还需要将所有的导航栏链接移动到一个div中(这里我添加了一个div类.links
):6uxekuva2#
将div的显示设置为inline-flex,并将垂直对齐设置为top: