无法弄清楚如何修复CSS宽度

Question

我的网站导航在所有计算机上正常呈现，但在移动设备（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上，“联系人”被切断，并被推到“主页”之下。换句话说，菜单在“博客”结束，并且第二行中只有“联系人”。

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

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

我做错了什么？或者，我该如何解决这个问题？

Demo

Answer 1

列表项不是您可以在移动浏览器上强制执行的操作。也许尝试使用图像垫片？你已经在尝试强制宽度：1017px;用你的div容器。

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

Reference

Answer 2

如果您将width: 437px设置为.custom .menu，它是不是很适合菜单？

另外，请尝试使用.custom .menu { border: none; }

上的<ul>