图像在固定导航的一行中 [英] Image in one line with a fixed navigation

问题描述

请在这里找到我的代码： https://jsfiddle.net/kbvwpo76/2/

我希望将图像放在页面顶部的固定导航的左侧上。在上面的链接中，您可以找到一些随机内容。

不要把导航推到正确的位置一切都是 float：left;

我必须在我的代码在一行中获取图像和导航？

解决方案

避免使用float： p>

HTML

 < div class =nav-wrapper> 
< div class =nav> 
< img src =https://t4.ftcdn.net/jpg/00/91/61/81/240_F_91618179_eR79OdR87jR9fp9S3aaiJGz4aGqkkwuE.jpg/> 
< div class =button_desktop_01> 1.0主菜单< / div> 
< div class =button_desktop_01> 2.0主菜单< / div> 
< / div> 
< / div> 
  

CSS

  .nav-wrapper，.nav {
 width：100％; 
} 
 
 .nav-wrapper，
 .nav> img {
 height：30px; 
} 
 
 .nav {
 position：fixed; 
背景颜色：＃f3f5f6; 
} 
 
 .nav> * {
 display：inline; 
 padding：4px; 
 box-sizing：border-box; 
 margin：2px; 
} 
  

https://jsfiddle.net/kbvwpo76/4/

Please find my code here: https://jsfiddle.net/kbvwpo76/2/

I want to put an image on the left side of the fixed navigation on the top of the page. In the link above you can find an example with some random content.

My issue now is that the image is behind the nagivation and it does not push the navigation to the right altough everything is float:left;

What do I have to change in my code to get the image and the navigation in one line?

解决方案

Avoid using float:

HTML

<div class="nav-wrapper">
  <div class="nav">
    <img src="https://t4.ftcdn.net/jpg/00/91/61/81/240_F_91618179_eR79OdR87jR9fp9S3aaiJGz4aGqkkwuE.jpg" />
    <div class="button_desktop_01">1.0 Main Menu </div>
    <div class="button_desktop_01">2.0 Main Menu </div>  
  </div>
</div>

CSS

  .nav-wrapper, .nav {
    width: 100%;
  }

  .nav-wrapper,
  .nav > img {
     height: 30px;
  }

  .nav {
    position: fixed;
    background-color: #f3f5f6;
  }

  .nav > * {
    display: inline;
    padding: 4px;
    box-sizing: border-box;
    margin: 2px;
  }

https://jsfiddle.net/kbvwpo76/4/

这篇关于图像在固定导航的一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！