Question

我需要一些帮助，将我的菜单放在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做）

所以，是的，如果有人能帮助我，我将非常感激

Answer 1

#cssmenu的宽度设置为auto。要使此部分居中，您需要将其设置为显式宽度，然后为其指定一个自动边距。

示例：

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

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

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

Answer 2

进行这些更改。

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

#cssmenu li {
    //display: block;  // Take this out
    display: inline-block; // Use Instead
    //float: left;  //Take this out
 }

将菜单文本居中

2 个答案: