徽标旁边的菜单栏 (CSS)

Question

我希望菜单栏位于徽标旁边（同一级别）。我应该怎么办？请看截图。

非常感谢您的帮助。

baner

Answer 1

我会把它放在 div 中，这样它们就可以挨在一起了。所以与其单独做，不如把它放在一个 div 中。如果这不起作用，则必须使用

定位它

*elementname* {
   position:relative;
   right:-200px;
   top:-150px;
}

您可以根据自己的喜好进一步调整

Answer 2

您可以简单地将两个元素包装到一个弹性容器中

header {
  display: flex;
  justify-content: space-between;
}

// for demo
ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
}

<header>
  <div class="logo">
    Your logo here
  </div>
  <nav>
    <ul>
      <li>link 1</li>
      <li>link 2</li>
      <li>link 3</li>
    </ul>
  </nav>
</header>

Answer 3

我建议将徽标和导航菜单都设为 inline-block，这样它们就不会互相推到新的一行。

header>#logo,
header>nav {
  display: inline-block;
}

<header>
  <div id="logo">
    LOGO HERE
  </div>
  <nav>
    <a href="#">Home</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </nav>
</header>

Answer 4

只需将所有内容放在一个 div 中并将每个列表放在一个 ul 下。如果您打算用图像代替徽标，只需放置 img 标签

<style>
.ar{
  display: flex;
  justify-content: space-between;
}

// for demo
ul {
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  border:solid black 2px;
}
</style>
</head>
<body>
<div class="ar">
<nav>
<ul>
<li>logo</li>
<li>home</li>
<li>application</li>
<li>news</li>
<li>about</li>
</ul>
</nav>
</div>

徽标旁边的菜单栏 (CSS)

Menu bar next to logo (CSS)

html

css

menu