html - 通过 CSS 样式化导航

Question

我在设计导航样式的解决方案时遇到了麻烦。这就是我想要的:

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

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

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

很抱歉我无法解释得更好，但我已经尽力了。图片和我目前所拥有的链接应该最能说明问题。

我认为如果 Logo 在 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;
}

然后播放直到它适合为止，在右侧你可以做同样的事情，在导航中你可以将它 float 到右边。如果您想要一个单独的 DIV，您还应该将此 #navi float 到左侧，将 #social float 到右侧。

如果你只在一个元素上使用填充(被阻塞)文本将总是居中因为填充左/右是相同的。

提示:如果您像这样使用 float ，并且希望某个元素位于新行上。通常它会被设置在 float 旁边。如果您在元素后使用 DIV 并执行 clear: both;，它将在一个新行上。