html - 在导航中成为第一张图片
问题描述
我有网站导航,我会放入图像。如果我输入图像代码,图像将在最后,我想要图像是否在开始导航(在链接 1 之前)。这是我的 CSS 代码:
<div class="topnav">
<img src="https://cdn.mos.cms.futurecdn.net/fHBA4cnnUNMz7pet6GVpSe.jpg" alt="logo" width="100" height="100">
<a class=active href="home.html">Homepage</a>
<a href="link.html">Link 1</a>
<a href="link.html">Link 2</a>
<a href="link.html">Link 3</a>
<a href="link.html">Link 4</a>
<a href="link.html">Link 5</a>
</div>
<div style="padding-left:16px">
</div>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: orange;
}
.topnav a {
float: left;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: red;
color: white;
}
</style>
Please help me how I put image on navigation start. Thank´s for responses!
解决方案
你还没有添加任何 CSS 来告诉图像去哪里。
我做了一个快速导航给你一个想法
https://codepen.io/courtneypunx/pen/eYBjdwp
.topnav {
display: block;
overflow: hidden;
background-color: orange;
}
`
`.left{
float: left;
margin-left: 25px;
}`
`.right{
float:right;
margin-top: 2em;
}`