1

我的网站导航在所有计算机上都能正常呈现,但在移动设备 (iOS) 上被截断/包装。

相关的CSS是:

.custom .menu {
margin-top: 1.25em;
margin-left: 288px;
width: 442px;
}

.custom .menu a {
font-size: 1.4em;
font-weight: bold;
text-align: left;
}

相关的 HTML 是:

<div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-19"><a href="http://rainleader.com/">Home</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://rainleader.com/about/">About</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://rainleader.com/services/">Services</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://rainleader.com/blog/">Blog</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://rainleader.com/contact/">Contact</a></li>
</ul></div>

这是它的外观(PC/Mac):

截屏

但在 iOS 上,“联系人”被截断并推到“主页”下方。换句话说,菜单以“Blog”结尾,第二行只有“Contact”。

如果我增加 的值width,它会在 PC/Mac 上扩展菜单末尾的底部边框线,而不会解决 iOS 上的问题。

屏幕截图,宽度增加(PC/Mac)

注意到上面扩展的底部边框线,但它仍然在 iOS 上截断/包装“联系人”。

我究竟做错了什么?或者,我应该如何解决这个问题?

演示

4

2 回答 2

1

列表项不是您可以在移动浏览器上强制使用的东西。也许改为尝试使用图像间隔?您已经在尝试强制 width: 1017px; 与您的 div 容器。

您可以尝试使用overflow-x,但这可能有效,也可能无效。

参考

于 2012-07-29T05:53:01.657 回答
1

如果您设置width: 437px.custom .menu它不适合在菜单下吗?

另外,尝试.custom .menu { border: none; }<ul>

于 2012-07-29T15:23:44.180 回答