html - 使用 Cargo Collective 进行 CSS 定位

Question

我正在处理的站点是 http://cargocollective.com/amytdatta

我试图将 Running on Cargo 链接定位在顶部导航栏的右侧。在我使用的主题中，曾经有一个搜索框就在那里，所以我隐藏了搜索并尝试将搜索 CSS 复制到 Cargo 链接 CSS。在这里:

.cargo_link {
float: right;
margin: 0 0 0 20px;
color: #cccccc;
padding: 0 0 0 25px;
width: 160px;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 50px;
text-align: right;
border-left: 1px solid #cccccc;
}

对 z-index 值的一些调整使 Cargo 链接再次可见。

不过，我仍然无法将它放在我想要的位置。这是搜索框的 CSS(我现在已经显示):

#search_form {
display: inline-block;
float: right;
margin: 0 0 0 20px;
padding: 0;
}


#search_form #search_term {
background: #f5f5f5;
border-left: 1px solid #cccccc;
border-top: 0;
border-bottom: 0;
border-right: 0;
color: #999999;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
height: 50px;
line-height: 12px;
padding: 0 0 0 25px;
width: 160px;
}

我基本上希望 Cargo Link 能够精确地替换搜索框。任何建议将不胜感激!

干杯。

Answer 1

你的 #nav_wrapper元素有一个 background: whiteSmoke;隐藏其下任何内容的属性。

您要么将 cargo 链接放在错误的元素中(即不在 #nav_wrapper 内，而是在其下方)。或者你不应该有 #nav_wrapper 的背景

编辑:

我猜你应该移动你的 <div class="cargo_link">在<div class="page_nav">之后的结束标记