1

好的，我正在尝试修改我的导航菜单。我想要这样的网站：

http://aleksfaure.com/

他有一个图像（徽标），两侧有 2 个菜单链接。我尝试了几种不同的方法，包括仅使用我的徽标作为顶部居中的图像，位于菜单之间。没有骰子。

这是我当前导航菜单中的相关 HTML 和 CSS。在这方面，我仍然是一个中级初学者。

HTML

<nav role="navigation">

<ul id="nav">

<li><a href="#" class="mainnav">Home</a></li>

<li><a href="#" class="mainnav">About Me</a></li>

<ul id="nav-right" style="float:right;">

<li><a href="#" class="mainnav">Portfolio</a></li>

<li><a href="#" class="mainnav">Contact</a></li> </ul>

</ul></nav>

CSS

#header nav {
    position: relative;
    width: 700px;
    height: 163px;
    display: block;
    margin: 0 auto;
    text-align: center;
}

#header nav ul li {
        float: left; list-style: none;
}

ul#nav li a {

    display: block; 
    width: 100px; 
    height: 100px;
    padding: 50px 0 0 0; 
    margin: 0 10px 0 10px;
    font-family: 'MuseoSlab-500', Helvetica, sans-serif; 
    font-size: 16px;
    text-transform: uppercase;
    color: #000; 
    text-shadow: 0 2px 1px #bbbaba; 
    text-decoration: none;


}
    ul#nav li a.mainnav:hover {

        color: #13cad1; 
        text-shadow: 0 2px 1px #fff;
}
4

1 回答 1

0

您不需要使用两个单独的列表。将整个菜单（包括您的图像）视为一个列表。为您的 HTML 考虑这样的事情：

<div>
<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Me</a></li>
  <li><img src="images/yourLogo.png"></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

并确保你有你的

  • 样式设置为浮动：左；

    #nav li { float: left; list-style: none;}

    然后，只需将整个 div 居中在页面上，并根据需要设置链接样式。

    单独说明：在您的代码中，您缺少第一个无序列表的结束标记。

    导航元素的支持不是很广泛，因此根据您的受众，您可能需要使用 div。

    • 于 2013-04-14T23:20:23.517 回答