中心导航栏

问题描述

我尝试将导航栏居中。

HTML

<nav>
    <ul>
        <li><a href="../help.html">HJEM</a></li>
        <li><a href="instructions.html">FORUM</a></li>
        <li><a href="instructions.html">DONER</a></li>
        <li style="margin-right: 0px;"><a href="legal.html">SERVERE</a>
        <li style="margin-right: 0px;"><a href="legal.html">FAQ</a></li>
        <li style="margin-right: 0px;"><a href="legal.html">KONTAKT</a></li>
    </ul>
</nav>

CSS

nav {margin: 3px 0; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none;}
nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 106px;
    margin: 0px 10px 0 0;
}
nav ul li a:hover {background: #f1f1f1;}

现在它从左到右漂浮。

Right now it floats from left to right. I want to center it.

奖金问题;如果有人知道这一点，如果你能指出我如何创建一个触摸兼容子菜单为doner的方向。

Bonus question; if someone know this, if you can point me in the direction on how to create a touch compatible sub menu for "doner".

感谢您的时间。

推荐答案

如果你想要的元素在一行，我会使用 li {display：inline-block; }

If you want the elements to be in a line, I would use li { display:inline-block; }

那么你可以为你的nav元素定义： margin：3px auto; 。

then yo can define for your nav element: margin: 3px auto;.

我理解你是否需要导航栏中项目的下拉菜单？这不是太困难：将下拉菜单作为div元素添加到li元素：

Did I understand you right that you want a dropdown menu for the items in the nav? That's not too difficult: Add the dropdown menu as a div element into the li element:

<li>
  <a href="../help.html">HJEM</a>
  <div class="dropdown">Hello!<br />I'm a dropdown menu!</div>
</li>

然后添加到样式表：

.dropdown {
  display:none;
  position:absolute;
  top:56px;
  background-color:#f1f1f1;
  width:200px;
  padding:10px;
}

li:hover .dropdown, .dropdown:hover { display:block; }

这篇关于中心导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！