Question

图像位于左侧导航栏旁边，而不是导航栏上方。

我希望将图像放置在导航栏的上方，而不是在其旁边。

.topnav {
  overflow: hidden;
  background-color: #00003f;
}

.topnav a {
  float: left;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 14px;
  text-decoration: underline;
}

.topnav a:hover,
.dropbtn,
.dropdown:hover {
  background-color: #3f61a1;
  text-decoration: underline;
}

.topnav a.active {
  background-color: #3f61a1;
  color: #fff;
}

<img src="images/ERAU_WW_0809.png" alt="Flying Fixed Wing drone" style="display: block; float: left; padding-right: 10px; padding-bottom: 10px" ; width="400" title="Flying Fixed Wing drone" />
<nav class="topnav">
  <a class="active" href="index.html" title="x"> Computer Information &amp; Download Versions </a>
  <a href="FAQ's.html" title="x"> FAQ </a>
  <a href="faq.html" title="x"> Hub Resources</a>
  <a href="table.html" title="x"> Technical Assistance &amp; Contact Information</a>
</nav>

Answer 1

我建议您删除CSS中的float: left

Answer 2

检查以下代码：

.topnav {
  overflow: hidden;
  background-color: #00003f;
}

.bannerImg {
  display: block;
 padding-right: 10px; 
 padding-bottom: 10px";
 width="400"
}
.topnav a {
  float: left;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 14px;
  text-decoration: underline;
}

.topnav a:hover,
.dropbtn,
.dropdown:hover {
  background-color: #3f61a1;
  text-decoration: underline;
}

.topnav a.active {
  background-color: #3f61a1;
  color: #fff;
}

<img src="images/ERAU_WW_0809.png" alt="Flying Fixed Wing drone" class="bannerImg" title="Flying Fixed Wing drone" />
<nav class="topnav">
  <a class="active" href="index.html" title="x"> Computer Information &amp; Download Versions </a>
  <a href="FAQ's.html" title="x"> FAQ </a>
  <a href="faq.html" title="x"> Hub Resources</a>
  <a href="table.html" title="x"> Technical Assistance &amp; Contact Information</a>
</nav>

将图像放在导航栏上方

2 个答案: