Question

我有这个问题我不能将这个简单的CSS Horizontam菜单放在中心位置你可以帮我怎么做？所以这是我的CSS代码

<style>
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
border-left:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>

这是我的HTML

</head>
<body bgcolor="gray">
<font face="calibri">

<center><img style="float:center" src="header.jpg" alt="" ></center>
<center>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">VIDEOS</a></li>
<li><a href="#">CONTACT US</a></li>
</center>

</ul>

谢谢你的帮助我只是这里的新成员。请回复谢谢

Answer 1

Fiddle

使用text-align: center并移除float: left和ul代码上的所有a。

ul {    
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    text-align: center;

}

CSS如何集中水平菜单？

1 个答案: