Question

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

他有一个图像（徽标），中间有两个菜单链接。我尝试了几个不同的东西，包括在菜单之间使用我的徽标作为顶部中心的图像。没有骰子。

这是我当前导航菜单中的相关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;
}

Answer 1

您不需要使用两个单独的列表。将整个菜单（包括图像）视为一个列表。对你的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>

并确保将

样式设置为float：left;

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

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

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

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

导航菜单：使用单个居中的图像，两侧有2个菜单链接

1 个答案: