Question

我目前正在学习网络开发，所以我正在练习一些HTML和CSS。我在左侧放置徽标时遇到问题。我想要完成的是这样的事情： prototype navigation

我的导航栏左侧有一个徽标，右侧是我的导航菜单主页，合作伙伴和产品，当屏幕宽度减小时会变成汉堡包菜单。

你能帮助我或指出一个很好的资源，让我的布局正确完成吗？谢谢大家。

这是我的HTML代码：

＆＃13;

.menu {
  margin: 0 30px 0 0;
  background-color: #f8f5f2;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}
.menu a {
  text-decoration: none;
  color:black;
  margin: 0 10px;
  line-height: 70px;
  font-family: playfair-display
}

span {
  color: dodgerblue;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 20px;
  float: right;    
}

#toggle {
  display: none;
}

@media only screen and (max-width: 500px) {
  label{
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    clear: right;
    display: block;
    border-bottom: 1px solid black;
    margin: 0;
  }
  #toggle: checked + .menu {
    display: block;
  }
}

＆＃13;

<header>   
  <div class="nav">
      <div id="logo">
      <img src="img/logoblackandred.png" alt="logo">
      </div>
      <label for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle" />
      <div class="menu">
          <a href="#">Home</a>
          <a href="#">Partners</a>
          <a href="#"><span>Products</span></a>
      </div>
  </div>
</header>

＆＃13;

Answer 1

尝试

img{
   display:inline;
   width:70px;
   height:50px;
   float:left;
}

Answer 2

喜欢这个吗？

我删除了position: fixed并将display: inline添加到#logo和#menu

.menu {
    margin: 0 30px 0 0;
    background-color: #f8f5f2;
    overflow: hidden;
    width: 100%;
    display: inline;
}

.menu a
{
    text-decoration: none;
    color:black;
    margin: 0 10px;
    line-height: 70px;
    font-family: playfair-display
}

span
{
    color: dodgerblue;
}

label
{
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 20px;
    float: right;    
}

#toggle
{
    display: none;
}

#logo {
    display: inline;
}

@media only screen and (max-width: 500px)
{
    label
    {
        display: block;
        cursor: pointer;
    }
    .menu
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a
    {
        clear: right;
        display: block;
        border-bottom: 1px solid black;
        margin: 0;
    }
    #toggle: checked + .menu
    {
        display: block;
    }
}

<header>   
<div class="nav">
    <div id="logo">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="logo" width="200px">
    </div>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">Partners</a>
        <a href="#"><span>Products</span></a>
    </div>
</div>
</header>

Answer 3

我很少更改Html代码，并添加到css代码几行。

这是Demo

.menu
{
    margin: 0 30px 0 0;
    background-color: #f8f5f2;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}

.menu a
{
    text-decoration: none;
    color:black;
    margin: 0 10px;
    line-height: 70px;
    font-family: playfair-display
}

span
{
    color: dodgerblue;
}

label
{
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 20px;
    float: right;    
}

#toggle
{
    display: none;
}

.logo {
	display: none;
}

.lg-logo {

	float: left;
    display: inline-block;
	width: 50px;
	margin-top: 15px;
    
}


@media only screen and (max-width: 500px)
{
    label
    {
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
    }
    .menu
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a
    {
        clear: right;
        display: block;
        border-bottom: 1px solid black;
        margin: 0;
    }
    #toggle: checked + .menu
    {
        display: block;
    }

    .logo {

    float: left;
    display: inline-block;
	width: 50px;
	margin-top: 15px;

}
}

<header>   
<div class="nav">
    <div id="logo">
    <img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
    </div>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">Partners</a>
        <a href="#"><span>Products</span></a>
         <img class="lg-logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
    </div>
</div>
</header>

注意：调整浏览器大小并查看结果。

Answer 4

尝试检查以下代码jsfiddle链接。

You can change the width for logo id and menu class  https://jsfiddle.net/pradeepv/yxnLs89h/

Answer 5

请使用旧代码重新使用此代码。

＆＃13;

.menu
{
    margin: 0 30px 0 0;
    background-color: #f8f5f2;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}

.menu a
{
    text-decoration: none;
    color:black;
    margin: 0 10px;
    line-height: 70px;
    font-family: playfair-display
}

span
{
    color: dodgerblue;
}

label
{
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 20px;
    float: right;    
}

#toggle
{
    display: none;
}

.logo {
	display: none;
}

.lg-logo {

	float: left;
    display: inline-block;
	width: 50px;
	margin-top: 15px;
    
}


@media only screen and (max-width: 500px)
{
    label
    {
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
    }
    .menu
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu a
    {
        clear: right;
        display: block;
        border-bottom: 1px solid black;
        margin: 0;
    }
    #toggle: checked + .menu
    {
        display: block;
    }

    .logo {

    float: left;
    display: inline-block;
	  width: 50px;
	  margin-top: 15px;
  }
}

＆＃13;

<div class="nav">
    <div id="logo">
    <img class="logo" src="http://pngimg.com/uploads/car_logo/car_logo_PNG1640.png" alt="logo">
    </div>
    <label for="toggle">&#9776;</label>
    <input type="checkbox" id="toggle" />
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">Partners</a>
        <a href="#"><span>Products</span></a>
         <img class="lg-logo" src="https://en.facebookbrand.com/wp-content/themes/fb-branding/prj-fb-branding/assets/images/thumb-drawn.svg" alt="logo">
    </div>
</div>

＆＃13;

在我的导航中添加我的徽标

5 个答案: