html - 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 代码的最后几行与另一行有些不同。这将是问题所在。希望它有所帮助