0

サイトに順序付けされていないリストベースのメニュー システムがあります。デスクトップでは、まさに私が望むとおりです。境界線や間隔なし:ここに画像の説明を入力

次に、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;
    }

モバイルで国境をなくすためのアドバイスはありますか?

4

1 に答える 1