通过CSS设置样式导航

Question

我遇到了解决风格导航问题的麻烦。这就是我想要的：

And this is a link to what I have so far.

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

在左侧，每个链接应该在它们自己的小块中居中，左边和右边的边框是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>

Answer 1

您可以尝试以下内容：

#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并执行clear: both;，则它将在新行上。

Answer 2

我是用你的设计写的：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 */ }

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

Answer 3

使用

 <img src="/imgs/navi/caul_white_nav.png" style="float: left;">