android - 如何在我的非 Canvas 菜单按钮旁边获得两个对象？

Question

我的页眉中有一个非 Canvas 菜单，我希望它位于我的标题和小 Logo 的左侧，但我只是不知道该怎么做或在我的 CSS 中添加任何内容，因为什么都没有似乎工作。我已经尝试使用 float: left;并调整了左右，但它只是改变了我菜单中的东西，而不是实际的菜单按钮，我已经尝试了几个小时来让我的飞机和它旁边的标题，但我似乎无法得到它甚至可以工作一点。

<!-- OFF MENU CANVAS JS-->

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

<!-- END OFF MENU CANVAS -->

header {
	z-index: 1000;
	width: 100%;
	background-color: #5BC2FF;
    margin: 0 auto;
}

/* OFF CANVAS MENU */
body {
    font-family: "Lato", sans-serif;
	backgound-color: #586166;
}

#airplane {
	float: left;
	margin-left: 100px;
  background: red; /* To illustrate the <img> */
  height: 40px; /* To illustrate the <img> */
  width: 60px; /* To illustrate the <img> */
  text-align: center; /* To illustrate the <img> */
}

#logoheader {
	float: left;
}

.headertext2 {
	z-index: 100;
  	text-align: center;
	font-family: "annie-use-your-telescope", "Arial", "sans-serif";
	display: inline;
	float: left;
}

#mySidenav {
	float: left;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #5BC2FF;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<div class="jumbotron-fluid">
	<header class="fixed-top">
		<!-- OFF CANVAS MENU START -->
	<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">My Journey</a>
  <a href="#">My Account</a>
  <a href="#">Create new account</a>
  <a href="#">Contact</a>
		</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
		</div>
<!-- OFF CANVAS MENU END -->
	
			 <div id="airplane">Logo</div>
		  
		  <h1 class="headertext2">My Journey</h1>

	</header></div>

Answer 1

这里你只需要display:inline-block。尝试更改这 3 个类行:

#airplane {
    display:inline-block;
    margin-left: 100px;
}

.headertext2 {
    z-index: 100;
    text-align: center;
    font-family: "annie-use-your-telescope", "Arial", "sans-serif";
    display: inline;
    display:inline-block;
}

#main {
    transition: .5s;
    padding: 16px;
    display: inline-block;
}

没有 logoheader id，所以你不需要这个:

#logoheader {
    float: left;
}

更新:

如果你想在菜单打开时把图片放在右边，你可以这样定义rightimage类:

.rightimage{
    float: right;
}

并修改js，在图片上切换这个类:

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.getElementById("airplane").classList.add("rightimage");
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
    document.getElementById("airplane").classList.remove("rightimage");
}

希望对您有所帮助。