如何让我的徽标和导航栏在同一行？答案

【问题标题】：How do I get my logo and navbar on the same line?如何让我的徽标和导航栏在同一行？
【发布时间】：2019-04-21 16:49:18
【问题描述】：

我需要我的标志和导航在同一行，当使用 div 容器时，黑色背景也因某种原因消失了。我有显示：inline-block 属性和值集，我是不是把它放在错误的选择器下？

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>

【问题讨论】：

标签： html css

【解决方案1】：

您为什么不尝试使用引导程序来使您的导航栏时尚且符合您的要求。你只需要编辑几件事。

在这里。

<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>

【讨论】：

【解决方案2】：

容器是 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>

【讨论】：