Question

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

我有一个问题，一旦我调整浏览器大小或打开平板电脑上的页面，菜单就会在徽标中运行。我想用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;
    }

这是标题的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: left;
  margin: 0;
  font-size: 36px;
}

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

我的标题中的CSS，菜单与徽标重叠

1 个答案: