Question

我无法在iPad上使用简单的水平导航工作/看起来不错。这只是一个直接的水平菜单，没有下拉菜单，因此无需担心a：hover（我知道它不能在移动设备上工作）。

该网站有twitter bootstrap，jQuery和jQuery UI。该菜单不是主导航，而是一个标签式菜单，允许人们过滤表格中的数据（点击该选项会使其进行休息调用以获取新数据）

在桌面上，它会显示菜单栏。在iPad上，它显示了UL列表。我希望将其修复为程式化。我没有使用Bootstrap选项的原因是因为我需要菜单一直保持

CSS

ul.horizontalNav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

ul.horizontalNav li {
    float: left;
}

ul.horizontalNav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

ul.horizontalNav li a:hover {
    background-color: #999;
}

ul.horizontalNav li.active {
    background-color:#4CAF50;
}

ul.horizontalNav li {
    border-right: 1px solid #bbb;
}

ul.horizontalNav li:last-child {
    border-right: none;
}

ul.horizontalNav li {
    border-right: 1px solid #bbb;
}

ul.horizontalNav li:last-child {
    border-right: none;
}

HTML

<div id="CAFSummaryHeaderBar"> 
    <ul class="horizontalNav" id="CAFSummaryMenu">
        <li><a href="#All">All</a></li>
        <li><a href="#MyRequests">My Requests</a></li>
        <li><a href="#Draft">Drafts</a></li>
        <li><a href="#Review">In Admin Review</a></li>
        <li><a href="#Approval">Getting Approvals</a></li>
        <li><a href="#FollowUp">Follow Up</a></li>
        <li><a href="#Archived">Archived</a></li>
        <li><a href="#Abandoned">Abandoned</a></li>
    </ul>
</div>

Answer 1

您是否尝试过为css使用媒体查询？

例如：

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

然后在

中添加所需的样式

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
ul.mylist {
my: style;
}

}

基本水平菜单无法在iPad上运行

1 个答案: