Question

我试图制作一个简单的菜单，使用CSS水平对齐5行。

HTML

<div class="container clearfix">
    <!-- Conteúdo -->
    <div id="menu">
        <!-- Menu da página -->
        <div class="nav">
            <ul>
                <li><a href="#main">Principal</a>

                </li>
                <li><a href="#corte">Cortes</a>

                </li>
                <li><a href="#equipa">Equipa</a>

                </li>
                <li><a href="#sobre">Sobre Nós</a>

                </li>
                <li><a href="#contacto">Contatos</a>

                </li>
            </ul>
        </div>
        <!-- Fim class nav -->
    </div>
    <!-- Fim ID menu -->

CSS

    body{
    width: 100%;
    display: block;
    margin: 0 auto;
}

body {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.container {
    width: 1024px;
}

a {
    text-decoration: none;
}

#menu{
    background-color: #000000;
    position: fixed;
    width: 100%;
    height: 100px;
    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
}

#menu ul{
        margin-top: 50px;
}

#menu li {
    text-decoration: none;
    list-style: none;
    padding: 5px 10px 50px 10px;
    display: inline;
}
#menu li a:hover {
    background-color: green;
    padding: 50px 15px 5px 15px;
    color: black;
}
#menu a {
    color: white;
    text-transform: uppercase;
}

问题：我无法将菜单链接居中，我无法将它们放在黑条的中间（水平对齐）。

有人可以帮忙吗？

编辑：我设法让它变得更好，但问题是：我无法将菜单链接分开，因此当我们将鼠标悬停时它们不会移动

Answer 1

http://jsfiddle.net/LVCkp/3/我使用固定边距来实现这个位置。

#menu ul{

    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
    margin-top: 70px;
    margin-left: 70px;
}

Answer 2

将您的#menu ul CSS更改为：

#menu ul {
    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
    margin-top: 75px;
    text-align: center;
}

<强> jsFiddle example

我添加了text-align: center并将您的margin-top更改为75px。

Answer 3

尝试将float:left放在ul上并删除fixed:position

尝试内联菜单

3 个答案: