1

我需要一些帮助将我的菜单集中在 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)

所以，是的，如果有人可以帮助我，我将不胜感激

4

2 回答 2

0

#cssmenu 的宽度设置为自动。要使这部分居中，您需要将其设置为明确的宽度，然后将其设置为自动居中。

例子：

#cssmenu ul{
    width:1024px;
    margin:0 auto;
}

如果您希望该背景颜色跨越页面的宽度，只需将 UL 放在 div 内并为该 div 赋予自动宽度。

这是一个带有更深入示例的 jsfiddle：http: //jsfiddle.net/aenhu/

于 2013-09-20T21:36:06.817 回答
0

进行这些更改。

#cssmenu ul {
  text-align: center;  // Add this
}

#cssmenu li {
    //display: block;  // Take this out
    display: inline-block; // Use Instead
    //float: left;  //Take this out
 }
于 2013-09-20T21:43:27.683 回答