如何在同一行上显示我的徽标和导航栏？

Question

I need my logo and nav on the same line, also the black background goes away for some reason when use the div container. 我需要我的徽标和导航在同一条线上，当使用div容器时，黑色背景因某些原因消失。 I have the display: inline-block property and value set, do I have it under the wrong selector? 我有显示：内联块属性和值集，我是否在错误的选择器下？

body div.container {
display: inline-block;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li{
display: inline-block;
margin: 1px;
padding: 0;
}

h1 {
font: #c00
}

body{
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans- 
serif; background-color: #fff;
} 


<link rel="stylesheet" type="text/css" href="hw7style.css">
</head>
<background>
<body>
<div id="container">
<img src="hw7-images/logo.png" alt="logo" class="logo">
<nav>   

  <ul class="menu">
    <li><a href="about.html"><img alt="About Us" src="hw7- 
images/about.png" ></a></li>
    <li><a href="events.html"><img alt="Events" src="hw7- 
images/events.png" ></a></li>
    <li><a href="outreach.html"><img alt="Community Outreach" src="hw7- 
images/outreach.png" ></a></li>
    <li><a href="resources.html"><img alt="Resources & Info" src="hw7- 
images/resources.png" ></a></li>
    <li><a href="contact.html"><img alt="Contact Us" src="hw7- 
images/contact.png" ></a></li>
  </ul>

</nav>

</div>

Answer 1

Why don't you try bootstrap for making your navigation bar stylish and as to your requirement. 为什么不尝试使用bootstrap使您的导航栏时尚和您的要求。 You just need to edit couple of things. 你只需要编辑几件事。

Here it is. 这里是。

 <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav>

Answer 2

the container is an id not a class target #container{display:flex;} 容器是一个id而不是一个类目标#container {display：flex;}

  #container { display:flex; } nav ul { margin: 0; padding: 0; list-style: none; } nav li{ display: inline-block; margin: 1px; padding: 0; } h1 { font: #c00 } body{ font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans- serif; background-color: #fff; }

 <link rel="stylesheet" type="text/css" href="hw7style.css"> </head> <background> <body> <div id="container"> <img src="hw7-images/logo.png" alt="logo" class="logo"> <nav> <ul class="menu"> <li><a href="about.html"><img alt="About Us" src="hw7- images/about.png" ></a></li> <li><a href="events.html"><img alt="Events" src="hw7- images/events.png" ></a></li> <li><a href="outreach.html"><img alt="Community Outreach" src="hw7- images/outreach.png" ></a></li> <li><a href="resources.html"><img alt="Resources & Info" src="hw7- images/resources.png" ></a></li> <li><a href="contact.html"><img alt="Contact Us" src="hw7- images/contact.png" ></a></li> </ul> </nav> </div>

如何在同一行上显示我的徽标和导航栏？

问题描述

2 个解决方案

解决方案1
0 2019-04-21 06:18:43

解决方案2
0 2019-04-21 08:49:18

如何在同一行上显示我的徽标和导航栏？

问题描述

2 个解决方案

解决方案1 0 2019-04-21 06:18:43

解决方案2 0 2019-04-21 08:49:18

解决方案1
0 2019-04-21 06:18:43

解决方案2
0 2019-04-21 08:49:18