在过去的 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;
}
关于如何在保持页面外观的同时使整个按钮可点击的任何帮助?
谢谢
最佳答案
你不应该给 li
一个填充。您应该将 a
设置为 display: block;
并给它们填充。这样做 a
将填充整个框,因为 li
和 a
之间不会有任何填充。
关于css - 水平菜单,不是整个框在 CSS 中可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13668673/