HTML / CSS留在标题中

Question

嘿家伙是否有可能让导航栏留在标题中而不管填充？因为我想在一行中制作网站标题和菜单，我认为填充会这样做......

＆＃13;

＆＃13;

#banner {
  background-color: #d3135a;
  height: 120px;
  margin-bottom: 4%;
}
h1 {
  float: left;
  padding-bottom: 6%;
}
#pav {
  font: Trebuchet MS;
  float: left;
  padding-left: 4%;
  margin-top: 4%;
}
#menu_virsut li {
  display: inline;
}
#menu_virsut {
  float: right;
  margin-top: 5%;
  padding-right: 4%;
  padding-bottom: 2%;
  padding-top: 1%;
}

＆＃13;

<header id="banner">

  <h1>The Site</h1>

  <nav id="menu_virsut">
    <ul>
      <li><a href>menu link</a>
      </li>
      <li><a href>menu link</a>
      </li>
      <li><a href>menu link</a>
      </li>
    </ul>
  </nav>
</header>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对齐的一种简单方法是为h1标记和容器设置相同的行高。您的href代码没有链接。如果您不希望链接转到任何地方，“＃”就是您要放的。

JSFiddle ：http://jsfiddle.net/9vwjbq8n/

#banner {
  background-color: #d3135a;
  height: 120px;
  margin-bottom: 4%;
}
h1 {
  float: left;
  line-height: 120px;
}
#pav {
  font: Trebuchet MS;
  float: left;
  padding-left: 4%;
  margin-top: 4%;
}
#menu_virsut li {
  display: inline;
}
#menu_virsut {
  float: right;
  line-height: 120px;
}

Answer 2

是的，从标题中的每个元素中删除边距，或者更喜欢它，修复它们的值。

e.g。从margin-top: 5%;

中删除menu_virsut

您的标记错误，作为一般规则，如果您要创建导航菜单，则应创建<ul>标记并将所有导航项放入其中，然后您可以使用float: right; <ul>元素。如果您需要徽标，请创建另一个<ul>元素并为其指定属性float: left;。确保所有边距都没问题，你已经完成了。

我创建了一个示例jsfiddle来说明如何编写好的标题/导航菜单。 https://jsfiddle.net/akhzywag/