Question

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

我的第一行是放置在最右边的3个链接。第二行是我左边的主要公司名称，而在最右边我将有3个导航链接。我还有一个我想放在最左边的公司标志，它漂浮在两排。

我不是一名css专家，到目前为止，我的目标似乎正朝着正确的方向发展，但我仍然坚持为什么我的导航无序列表在它们看起来正确嵌套时都处于最终状态。< / p>

此外，我需要在某些时候做出响应，以便次要行导航项目折叠成＆＃34;汉堡包图标＆＃34; 。如果有人可以提供我所拥有的一些指示，我们将不胜感激。

＆＃13;

SELECT *, count(*) as count
FROM user_actions JOIN actions
    ON user_actions.action_id=actions.id
GROUP BY actions.id;

＆＃13;

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

＆＃13;

这是关于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>

到徽标的顶部

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

1 个答案: