Question

我正在尝试根据skype网站上找到的导航菜单制作导航菜单，但是版本更简单。

所以菜单包含3个项目。

徽标
导航菜单顶行（2项，语言和特殊按钮）
导航菜单底行（5项）

目标：
我的最终目的是让两行彼此对齐以对齐右侧（我已经管理过）和左侧的徽标。此外，徽标必须与导航菜单的底行对齐。

HTML代码：

  <nav>
      <ul> 
      <li>
           <img src="images/lang.png" alt="Language" /></a>
        </li>
        <li>
         <a href="#" class="lang">NEDERLANDS</a>
        </li>
        <li>
           <a href="#" class="special">SPECIAL</a>
        </li>
    </ul>
        <a href="#"> <img src="images/logo.png" alt="Logo" class="logo"/></a>
      <ul>

        <li>
           <a href="#" class="selected">HOME</a>
        </li>
        <li>
           <a href="#" >HOE WERKT HET?</a>
        </li>
        <li>
           <a href="#">HELP</a>
        </li>
        <li>
           <a href="#">PRIJZEN & AANMELDEN</a>
        </li>
        <li>
           <a href="#">INLOGGEN</a>
        </li>
     </ul>
  </nav>

CSS：

body { 
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background: #f2f2f2;
    font-family: Droid Sans ,Arial,'Liberation Sans',FreeSans,sans-serif;
    line-height: 14px;
    display:block; }


header nav li {
float:left;
margin-right:50px;
list-style: none;
text-decoration: none;
vertical-align: text-bottom;
}


header nav a {
font-weight: bold;
font-family: PT Sans;
text-decoration: none;
font-size: 14px;
color: #333333;
text-shadow: white 1px 1px 1px;
}

header nav a:hover, a:active {
color: #0065f5;
}
header nav  .selected {
text-decoration:underline;
}

header nav ul {
float: right;
margin-top:10px;
margin-bottom:10px;
}

.special {
text-decoration:none;
color: white;
background: #0065f5;
padding:5px 15px;
text-shadow: #333333 1px 1px 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.special:hover {
 color: #fed000;
}

.logo {
float:left;
margin-top: 30px;
}

Answer 1

您可以向左移动徽标，并为margin-top提供与语言菜单高度相同的像素数量。或者使用position: absolute。

但究竟是什么不 achive？ jsFiddle似乎很好，但也许图像（缺失的图像）定位不好。

导航菜单与css对齐

1 个答案: