DIV 内左边的间距太奇怪了！

Question

由于某种原因，div 内部左侧有一个空格

，这是我所看到的图片 http:// /tinypic.com/r/msc2h/7

CSS

 div {margin:auto;}

    li{padding: 0px; margin: 0px; display: inline; float:left;}

    ul{height: 20px; text-align: left; vertical-align: center; margin: auto;}

HTML

<div style="border: 1px solid white; width: 500px;">
    <ul>
    <li>Home&nbsp;</li>
    <li>Product&nbsp;&nbsp;</li>
    <li>Links&nbsp;&nbsp;</li>
    <li>Contact Us&nbsp;&nbsp;</li>
    <li>Abuot Us</li>
    </ul>
</div>

Answer 1

您还应该将 UL 的填充/边距设置为 0。 Ul 本身有填充。

Answer 2

它不是来自 div，而是来自浏览器为您设置的内边距/边距（如果您不覆盖它）。试试这个：

    div {
        margin: auto;
        border: 1px solid white;
        width: 500px;
    }

    li {
        padding: 0;
        margin: 0 5px;
        display: inline;
        float: left;
    }

    ul {
        height: 20px;
        text-align: left;
        vertical-align: center;
        padding: 0;
        margin: 0;
    }

我注意到您使用   在列表项之间添加空格，这简直是混乱和多余，所以我添加了 margin: 0 5px; 每个列表项。

因此，删除所有这些   并将边框和宽度属性移至 CSS，我在上面已完成此操作，因为这是一个很好的做法。

    <div>
        <ul>
        <li>Home</li>
        <li>Product</li>
        <li>Links</li>
        <li>Contact Us</li>
        <li>About US</li>
        </ul>
    </div>

要详细了解为什么分离结构 (HTML) 和表示 (CSS) 是一种很好的做法，请观看 Google 提供的这些精彩视频：从头开始的 HTML、CSS 和 Javascript。

Answer 3

可能是 ul 上的 margin:auto ，它基本上会将 ul 置于 div 的中心。这种列表可能会出现意想不到的行为。

您是否使用 Firebug 等开发人员工具或 chrome 内置的“检查元素”工具来仔细查看？它们会单独突出显示每个元素，并准确地告诉您边距/填充/所有内容使用的值。它确实可以加快此类问题的解决速度。查看正在发生的情况的另一种简单方法是为所有内容提供不同颜色的 1px 边框。这样您就可以更好地判断问题是在 ul 内部还是外部，甚至是在 li 之一上。