Question

我正试图将导航栏放在中心位置。

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;}

现在它从左向右浮动。我想把它放在中心位置。

奖金问题;如果有人知道这一点，你是否可以指出我如何为“doner”创建一个兼容触摸的子菜单。

感谢您的时间。 hjortefjellet.com

Answer 1

如果您希望元素排成一行，我会使用li { display:inline-block; }

然后你可以为你的导航元素定义：margin: 3px auto;。

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

<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; }

Answer 2

就这样做

nav {
   margin: 3px auto;
}

Answer 3

首先，关闭你的第4个“li”标签。另外，添加“margin：0 auto;” “nav ul”并删除内联样式。

代码应如下所示：

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><a href="legal.html">SERVERE</a></li>
    <li><a href="legal.html">FAQ</a></li>
    <li><a href="legal.html">KONTAKT</a></li>
 </ul>
</nav>

和CSS

nav {margin: 3px auto; width: 700px;}
nav ul {width: 700px; height: auto; list-style: none; margin:0 auto; display:block;}
nav ul li a {
background: none repeat scroll 0% 0% #FFF;
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 0px;
width: 106px;
}

nav ul li a:hover {background: #f1f1f1;}

http://jsfiddle.net/Sb42u/1/

Answer 4

1。要使导航栏居中：

您只需在margin: 3px 0;中将margin: 3px auto更改为nav。

2。要创建DropDown菜单：

首先，我建议以这种方式更改标记：

<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>
             <ul class="submenu">
                <li><a href="legal.html">SERVERE</a>
                <li><a href="legal.html">FAQ</a></li>
                <li><a href="legal.html">KONTAKT</a></li>
             </ul>
       </li>
    </ul>
  </nav>

然后你可以使用这个css类来模拟下拉列表：

nav ul li{ 
   position:relative; 
   float:left;
}

nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}

小提琴： http://jsfiddle.net/9Yg47/4/

中心导航栏

4 个答案:

1。要使导航栏居中：

2。要创建DropDown菜单：