2

在过去的 3 个小时里，我一直在尝试让它正常工作，但没有运气，我很沮丧。

我有一个带有链接的水平菜单，但我无法让整个按钮都可以点击。然后我在菜单居中遇到了麻烦。

页面看起来像这样（它以网站为中心，容器宽度 900px）

http://i.stack.imgur.com/cFKpf.png

HTML：

<div id="container">
         <div id="title">
            <h1>Welcome to my website</h1>
         </div>
         <div id="menu">
            <ul>
               <li><a href="">Home</a></li>
               <li><a href="">About</a></li>
               <li><a href="">Contacts</a></li>
               <li><a href="">FAQ</a></li>
            </ul>
         </div>
         <div id="content"></div>
</div>

CSS：

#container{
   background-color: whitesmoke;
   width: 900px;
   margin: 0px auto;
   padding-bottom: 20px;

}

#menu, #menu ul {
   width: 100%;
   height: 35px;
   background-color: #333;
   color: whitesmoke;
   margin: 0px auto;
   padding: 0px;
   float: left;
   display: table;
   text-align: center;
   font-weight: bold;
}

#menu li{
   display: table-cell;
   padding: 0px 50px;
   vertical-align: middle;
   border: solid 1.5px olive;
   }

#menu a, #menu a:visited {
   color: whitesmoke;
   text-decoration: none;
   }



#menu li:hover {
   background-color: olive;
   color: white;
}

有关如何在保持页面外观的同时使整个按钮可点击的任何帮助？

谢谢

4

2 回答 2

1

你不应该给lia 填充。您应该设置a为display: block;并给他们填充。这样做会填满整个盒子，因为和a之间不会有任何填充。lia

于 2012-12-02T11:11:07.837 回答
0

只需设置display: block锚点：

#menu a {
  display: block;
}
于 2012-12-02T11:09:41.017 回答