HTML/CSS - 從手機上查看額外的菜單間距

Question

我在我的網站上有一個無序的基於列表的菜單系統。在桌面上，它完全是我想要的。無邊界或間距：

然後，一個移動（我用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; 
    } 

上移動擺脫邊框的任何意見？

Answer 1

你的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="<? echo(($page == "forums" ? "menu_li_current" : "menu_li"));?>"><a href="http://forums.tfdidesign.com">Forums</a></li> 
</ul> 

我不認爲某事是錯誤的CSS。因爲每個按鈕都具有相同的設置。 您的Html-Code的最後一行與另一行有所不同。這將是問題。希望它有幫助