2

我在想出一个解决我的导航样式的解决方案时遇到了麻烦。这就是我要的：

我想要什么

这是我到目前为止所拥有的链接。

这应该是一个导航栏上的两类不同的链接。左侧一组用于徽标和其他默认链接，右侧一组用于社交。我现在只需要左侧的帮助，但我想我会进一步解释。

在左侧，每个链接都应以自己的小块为中心，左右边框为 1px 白色。在他们的悬停状态下，他们的“盒子”的背景应该是白色的。徽标应位于左侧的第一个位置。

对不起，我无法更好地解释，但我已经尽力了。到目前为止，我所拥有的图片和链接应该解释得最多。

我认为如果徽标在 CSS 而不是 HTML 中会更好？

CSS：

/* Navigation bar */
#navi {
   font-family: Helvetica Neue: Condensed Bold;
   font-size: 14px;
   color: white;
   text-transform: uppercase;
   background-color: #1e416f;
   height: 30px;
   margin: 0 0 20px 0;
   padding: 20px 0 0 0;
}

#navi a {
color: white;
margin: 0 0 0 20px;
height: 30px;
}

#navi a:hover {
background: white;
color: #1e416f;
}

HTML：

<!-- NAVIGATION -->
<div id="navi">
<img src="/imgs/navi/caul_white_nav.png">
<a href="#">Directories</a>
<a href="#">Committees</a>
<a href="#">Resources</a>
<a href="#">About</a>
</div>
4

3 回答 3

2

您可以尝试以下方法：

#navi img, #navi a {
    float: left; /* float next to each other on the left hand side */
}
#navi a { /* use some padding to have some empty space */
    padding: 5px;
    border-right: 1px solid #ffffff;
}
#navi a:hover { /* on hover, background white on A tags */
    background: #ffffff;
}

而不是玩到合适为止，右侧您可以做同样的事情，在导航内您可以将其浮动到右侧。如果你想有一个单独的 DIV，你也应该把它浮动#navi到左边和#social右边。

如果您仅在元素（被阻止）上使用填充，则文本将始终居中，因为左/右填充是相同的。

提示：如果你使用像这样的浮动并且你希望一个项目在一个新的行上。通常它会设置在浮动旁边。如果您在项目后使用 DIV 并执行 a clear: both;，它将在新行上。

于 2013-08-27T13:21:11.770 回答
1

我用你的设计写了这个：http: //jsfiddle.net/ninty9notout/v3658/

只是关于这里是什么的信息：

在主页上，使用：<h1 class="logo">...</h1>和在所有其他页面上：<div class="logo">...</div>

.logo并#primary-nav向左浮动以使它们粘在左侧。

所有li和a标签也浮动到左侧。块元素比内联元素更容易设置样式。

#tools-nav浮动到右侧，因此它粘在右侧。

我曾经text-indent: -9999px;隐藏徽标的文本和可能的图标#tools-nav- 随意通过background属性添加图标。将图标锚的宽度设置为您的图标的任何宽度 + 20（任一侧 +10px）。

就是这样。

的HTML：

<div id="navi">
    <h1 class="logo"><a href="#">Name of Site</a></h1>

    <ul id="primary-nav">
        <li><a href="#">Directories</a></li>
        <li><a href="#">Committees</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">About</a></li>
    </ul>

    <ul id="tools-nav">
        <li class="login"><a href="#">Log In</a></li>
        <li class="email icon"><a href="#">Email</a></li>
        <li class="twitter icon"><a href="#">Twitter</a></li>
        <li class="search icon"><a href="#">Search</a></li>
    </ul>
</div>

CSS：

#navi {
    height: 30px;
    background: #1e416f;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.logo {
    margin: 0;
    padding: 0;
    float: left;
}

.logo a {
    float: left;
    margin: 2px 10px;
    width: 36px;
    height: 26px;
    background: url(http://redsky.incredifull.com/imgs/navi/caul_white_nav.png) left top no-repeat;
    text-indent: -9999px;
}

#primary-nav, #tools-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }

#primary-nav a,
#tools-nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
    border-right: 1px solid white;
    line-height: 30px;
}

#primary-nav li:first-child a,
#tools-nav li:first-child a{ border-left: 1px solid white; }

#tools-nav { float: right; }

#tools-nav .icon a {
    text-indent: -9999px;
}

#tools-nav .email a { /* image */ }
#tools-nav .twitter a { /* image */ }
#tools-nav .search a { /* image */ }

我想这就是你想要的。享受 ：）

于 2013-08-27T13:36:36.657 回答
0

利用

 <img src="/imgs/navi/caul_white_nav.png" style="float: left;">
于 2013-08-27T13:21:13.267 回答