0

这是我的导航栏 CSS 代码：

 ul     {
    overflow:hidden;
    margin: 0;
    padding: 0;
    align: center
    list-style-type: none; 
    }



li      {
    float: left}

    a:link,a:visited
    {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }

目前，该栏与左侧对齐，我希望它在中心。有人可以解释如何做到这一点吗？如果我输入额外的代码行，我需要输入什么，它会在哪里？

这是我的 HTML 标记的部分代码：

<body>

<ul>

<li><a href=csshomepage.html>Home</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#links">Links</a></li>


</ul>
4

5 回答 5

4

li将内联和锚点显示为inline-block。

ul {
    margin: 0;
    padding: 0;
    text-align: center
}
li {
    display: inline;
    list-style: none; 
}
a:link,a:visited
{
    display:inline-block;
    margin-right: -4px;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#98bf21;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
a:hover,a:active
{
    background-color:#7A991A;
}

检查演示

于 2013-10-09T18:09:36.770 回答
0

要居中ul，您应该应用 aa width 或 max-width 然后

ul {
margin:0 auto;
}
于 2013-10-09T18:06:16.930 回答
0

你可以这样做：

 ul {
  overflow:hidden;
  margin: 0 auto;
  padding: 0;
  align: center
  list-style-type: none;
  width: 50%;
}

margin: 0 auto;允许它居中，只要你有一个width.

JSFIDDLE

于 2013-10-09T18:06:18.917 回答
0

FIDDLE

ul     {
    overflow:hidden;
   list-style: none;
  padding: 0;
  width: 50%;
  margin: 0 auto;
    //align: center
   // list-style-type: none; 
    }
于 2013-10-09T18:06:43.477 回答
0

将此设置为您的 menu.css（如果您的导航将被视为您的菜单栏）

这包含居中导航所需的 .css 代码

于 2013-10-09T18:26:05.593 回答