html - CSS 和响应式标题/导航问题

Question

我正在尝试创建一个带导航的响应式标题，但我在设计和放置链接等方面遇到困难。我基本上有 2 行。

我的顶行是放置在最右边的 3 个链接。第二行左边是我的主要公司名称，最右边是 3 个导航链接。我还有一个公司 Logo ，我想将其放置在两行上方的最左侧。

我不是 CSS 专家，到目前为止，我所拥有的一切似乎都在朝着正确的方向发展，但我仍然不明白为什么我的两个导航无序列表在它们看起来正确嵌套时都位于所有内容的末尾。

此外，我还需要在某些时候使其具有响应性，以便辅助行导航项折叠成一个“汉堡包图标”。如果有人可以对我所拥有的东西提出一些建议，我们将不胜感激。

body {
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  text-decoration: none;
}

.navContainer {
  width: 100 %;
  height: 105 px;
  background-color: red;
  margin: 0px;
  padding: 0px;
}

.logo {
  height: 100px;
  max-width: 100%;
  float: left;

  overflow: hidden;
  left: 10px;
  margin: 5px;
}

.bottomBar {
  width: 100%;
  height: 65px;
  background-color: blue;
}

.companyName {
  color: white;
  display: table-cell;
  height: 60px;
  padding-left: 5px;
}

.topNavigation {
  width: 100%;
  height: 40px;
  background-color: grey;
}

.topNavigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

.topNavigation li {
  float: right;
}

.topNavigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.topNavigation li a:hover {
  background-color: #111;
}

.navigation ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  width: 100%;
}

.navigation li {
  float: right;
}

.navigation li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #111;
}

<img class="logo" src="https://upload.wikimedia.org/wikipedia/en/b/be/Google_Chrome_for_Android-_Android_5.0_Logo.png">


<div class="topNavigation">
  <ul>
    <li><a href="#news">Link 1</a></li>
    <li><a href="#contact">Link 2</a></li>
    <li><a href="#about">Link 3</a></li>
  </ul>

</div>

<div class="bottomBar">
  <span class="companyName">

    <h3>My Company Name Goes Here </h3>
  </span>


  <div class="navigation">

    <ul>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>

  </div>
</div>

这是我在 jsfiddle 上的元素 https://jsfiddle.net/masAndrew/0apmmfLm/4/

Answer 1

我已经为您修复了它，我认为: https://jsfiddle.net/0apmmfLm/6/

你需要的是移动

 div class="topNavigation">
     ul>
       li><a href="#news">Link 1</a></li>
       li><a href="#contact">Link 2</a></li>
       li><a href="#about">Link 3</a></li>
  /ul>

    /div>

到标志的顶部