我需要一些帮助将我的菜单集中在 html css 上 这是我的代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OMFGuys Official Website</title>
<link rel="shortcut icon" href="http://i.imgur.com/3k9U9Os.png">
</head>
<body background="Imgs/papBG.png">
<div id="header" align="center">
<link rel="stylesheet" type="text/css" href="img.css" media="screen" />
<img src="Imgs/banner.png" width="100%">
</div>
<div id='cssmenu'>
<link rel="stylesheet" type="text/css" href="menucss.css" media="screen" />
<ul>
<li class='active'><a href='index.html'><span>Início</span></a></li>
<li><a href='#'><span>Youtube</span></a></li>
<li><a href='#'><span>Sobre Nós</span></a></li>
<li><a href='#'><span>Contactos</span></a></li>
<li class='last'><a href='#'><span>Loja do Fã</span></a></li>
</ul>
</div>
</body>
和 css 文件:
#cssmenu {
float: right;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#cssmenu ul {
list-style-type: none;
width: auto;
position: relative;
display: block;
height: 33px;
font-size: 12px;
background: url(http://cssmenumaker.com/sites/default/files/menu/69/bg.png) repeat-x top left;
font-family: Verdana, Helvetica, Arial, sans-serif;
border: 1px solid #000;
margin: 0;
padding: 0;
}
#cssmenu li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
#cssmenu li a {
float: left;
color: #A79787;
text-decoration: none;
height: 24px;
padding: 9px 15px 0;
font-weight: normal;
}
#cssmenu li a:hover,
#cssmenu .active {
color: #fff;
background: url(http://cssmenumaker.com/sites/default/files/menu/69/bg.png) repeat-x top left;
text-decoration: none;
}
#cssmenu .active a {
color: #fff;
font-weight: 700;
}
#cssmenu ul {
background-color: #629600;
}
#cssmenu li a:hover,
#cssmenu li.active {
background-color: #7AB900;
}
这是我得到的结果:https://dl.dropboxusercontent.com/u/214940697/PAP/index.html 但我想要这样的东西:http://i.imgur.com/GCxKE5q.jpg (用 Paint xD 做了)
是的，如果有人能帮助我，我将不胜感激
最佳答案
进行这些更改。
#cssmenu ul {
text-align: center; // Add this
}
#cssmenu li {
//display: block; // Take this out
display: inline-block; // Use Instead
//float: left; //Take this out
}
关于html - 居中我的菜单的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18925899/