我的网站上有一个基于无序列表的菜单系统。在桌面上,这正是我想要的。没有边框或间距:
然后,一部手机(我正在使用 iPad/iPhone 进行测试),它看起来像这样:
整个事物周围和某些按钮之间有灰色边框。
呈现页面的 HTML 是这样的:
<ul class="menu">
<li class="<? echo( ($page == "main" ? "menu_li_current" : "menu_li") );?>"><a href="index.php?p=main">Home</a></li>
<li class="<? echo( ($page == "products" ? "menu_li_current" : "menu_li") );?>"><a href="index.php?p=products">Products</a></li>
<li class="<? echo( ($page == "partners" ? "menu_li_current" : "menu_li") );?>"><a href="index.php?p=partners">Partners</a></li>
<li class="menu_li"><a href="http://forums.tfdidesign.com">Forums</a></li>
</ul>
CSS如下:
.menu {
padding: 0px;
margin:0;
list-style: none;
font-size: 15px;
list-style-type: none;
color: #fafafa;
margin-top:5px;
width:930px;
float:left;
}
.menu a {
color: #fafafa;
text-decoration:none;
}
.menu_li:first-child {
float:left;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.menu_li:last-child {
float:left;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
}
.menu_li {
float: left;
line-height: 33px;
text-align: center;
width: 232px;
height: 36px;
background-color: #282828;
}
.menu_li:hover {
background-color: #404040;
}
.menu_li:active {
background-color: #545454;
}
.menu_li a {
display: block;
color: inherit;
text-decoration: none;
}
/* active */
.menu_li_current {
float: left;
line-height: 33px;
text-align: center;
width: 232px;
height: 36px;
background-color: #696969;
}
.menu_li_current a {
display: block;
color: inherit;
text-decoration: none;
}
.menu_li_current:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
关于摆脱手机边界的任何建议?