与标志一致的导航栏答案

【问题标题】：Navigation bar in line with logo与标志一致的导航栏
【发布时间】：2016-04-16 23:06:54
【问题描述】：

我需要导航方面的帮助，以使其与徽标一致。基本上介于徽标和货币按钮之间。

有没有一种简单的方法来实现它而不是搞乱 div 和许多 css 调整？

我对 html 的了解非常基础，所以在这里寻求帮助。谢谢！

<header class="main-header">

<div class="bg" style="display: none;"></div>

<div class="row top">

<div class="columns">

<div class="search-account columns">

</div>

<div class="bottom-row">

<div class="row">

</div>

<div class="main-menu-dropdown-panel">

<div class="row"> </div>

</div>

<div class="mobile-menu">

<div class="row">

</header>

【问题讨论】：

你能分享你的代码吗？我们需要一些 html 和 css 来帮助您！

标签： html css shopify

【解决方案1】：

这是您可以使用的基本模板。

header h1,
ul,
li {
  display: inline-block;
}
ul {
  float: right;
}
body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0 0 0 10px;
  font-family: verdana;
  font-weight: 100;
}
a {
  text-decoration: none;
  color: black;
  margin-right: 10px;
  font-family: arial;
  font-weight: 100;
}
a:hover {
  color: orange;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <header>
    <img src="logo.png" alt="logo">
    <h1>Heading</h1>
    <ul>
      <li><a href="#">Link 1</a>
      </li>
      <li><a href="#">Link 2</a>
      </li>
      <li><a href="#">Link 3</a>
      </li>
      <li><a href="#">Link 4</a>
      </li>
    </ul>
  </header>
</body>

</html>

【讨论】：