サイトに順序付けされていないリストベースのメニュー システムがあります。デスクトップでは、まさに私が望むとおりです。境界線や間隔なし:
次に、1 つのモバイル (私は 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;
}
モバイルで国境をなくすためのアドバイスはありますか?