html - 标题中的 CSS，菜单与 Logo 重叠

Question

我的页面在 bee-barcelona.herokuapp.com 上运行

一旦我调整浏览器大小或在平板电脑上打开页面，我就会遇到菜单运行到 Logo 中的问题。我想用 CSS 清除它。我必须如何设置元素不重叠？

这是我当前的标题 CSS:

header {
  background-color: #000;
  background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
  background: -moz-linear-gradient(top,  #555, #222);
  color: #FFFF00;
  font-weight: bold;
  position: relative;
  padding: 22px 100px;
  #logo {
    margin: 0;
    font-size: 36px;
  }
  a {
    color: #ffc400;
    text-decoration: none;
  }
  ul {
    position: absolute;
    right: 100px;
    top: 18px;
    list-style: none;
    margin: 0;
    li {
      float: left;
      padding: 2px 10px;
      border-right: solid 2px #6F6F6F;
      &.last {
        border-right: none;
      }
    }
  }
}
.language {
    float:right;
    padding-bottom: 10px;
    }

这是 header 的 HTML:

<h1 id='logo'>
  <%= link_to Refinery::Core.site_name, refinery.root_path %>
</h1>
<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>
<div class="language">
<%= link_to image_tag("cat.png"),refinery.url_for(:locale => :ca) %>
<%= link_to image_tag("esp.png"),refinery.url_for(:locale => :es) %>
<%= link_to image_tag("eng.png"),refinery.url_for(:locale => :en) %>
</div>

Answer 1

菜单与 Logo 重叠，因为它是绝对定位的。尝试改用 float :

#logo {
  float: left;
  margin: 0;
  font-size: 36px;
}

header ul {
  float: right;
  list-style: none;
  margin: 10px 0 15px 0;
}