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

【问题标题】：Can't Figure Out How to Fix CSS Width无法弄清楚如何修复 CSS 宽度
【发布时间】：2012-07-29 05:39:53
【问题描述】：

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

相关的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 上的问题。

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

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

Demo

【问题讨论】：

你能分享你的这个菜单的 HTML 代码吗？
你应该看到#content或#content box的宽度
嗨！你是对的，这条线确实延伸到那个值。但是，我试图通过定位.menu 来限制它/强制它更短。菜单应在徽标下方居中，没有一条线超出任一边缘。

标签： html css formatting

【解决方案1】：

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

另外，尝试在<ul> 上使用.custom .menu { border: none; }

【讨论】：

做到了！我使用了border-bottom: none;，因为border: none; 删除了“Home”的左边框。

【解决方案2】：

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

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

Reference

【讨论】：

嗯...好吧，我试过overflow-x: auto;和overflow-x: hidden;——没有改变它。似乎解决截断问题的魔术宽度是width: 444px;。但是，设置为该值时，PC/Mac 上会出现一点持续的底部边框线，这在移动设备上并不明显（即使您放大）。这是因为两个设备上的像素不相等吗？您可以在演示 URL 上看到这条小线。