第一个列表项（<li>）在谷歌浏览器中浮动

Posted 2023-03-05

【中文标题】第一个列表项（<li>）在谷歌浏览器中浮动

【英文标题】：First list item (<li>) floating right in google chrome

【发布时间】：2011-03-17 20:23:12

【问题描述】：

我在使用谷歌浏览器时遇到问题。问题是第一个列表项的项目符号向右浮动，而所有其他列表项的项目符号在左侧正确对齐。

这是我的代码：

 <div class="window_sub_title2">The Interface</div>          
 <ul>
     <li>Toolbox </li>
     <li>Context Menus </li>
     <li>Tool Options Bar </li>
     <li>Menu Bar </li>
     <li>Palette Well </li>
     <li>Rulers </li>
     <li>Guides and grid </li>
     <li>Navigating in Photoshop </li>
     <li>Shortcuts </li>
     <li>File  Browser </li>
 </ul>

这是它在 chrome 中的外观：http://www.flickr.com/photos/41695354@N08/4807767137/

这里是实际的link。

【问题讨论】：

你能提供一些示例代码来演示这种行为吗？

【参考方案1】：

这个 css 为我解决了这个问题：

li 
    clear:left;

【参考方案2】：

li 
list-style-position: inside;

为我工作！

【参考方案3】：

使用 CSS 手动覆盖项目符号间距和填充的所有默认值。

【参考方案4】：

可以在here in the bug reports 和一个测试用例here 中找到它的背景。仅当您将 float:left 应用于该块时才会发生这种情况。建议的修复方法是使用clear:left;，但您可能需要小心定位，以免意外清除没有错误的元素（如菜单）。

【参考方案5】：

我遇到过这种问题。我通过这样做解决了这个问题。请仔细查看代码样式。希望对你有帮助。

<ul>
     <li>Toolbox </li><li>
         Context Menus</li><li>
         Tool Options Bar </li><li>
         Menu Bar </li><li>
         ------ 
        File  Browser </li>
 </ul>