DIV 左侧的奇怪间距帮助！答案

【问题标题】：Werid spacing to the left inside of DIV help!DIV 左侧的奇怪间距帮助！
【发布时间】：2011-03-13 12:58:33
【问题描述】：

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

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>

【问题讨论】：

标签： css html spacing

【解决方案1】：

对于 UL，您也应该将 padding/margin 设置为 0。 Ul 本身有填充。

【讨论】：

这实际上取决于用户代理的默认样式。一些浏览器使用边距，一些使用填充；一些将样式应用于<li>，一些应用于包含列表。
使用这个为 UL: ul{height: 20px;文本对齐：左；垂直对齐：居中；边距：0px；填充：0px}

【解决方案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;
    }

我注意到您使用&nbsp; 在列表项之间添加空格，这简直是凌乱且多余的，因此我为每个列表项添加了margin: 0 5px;。

所以删除所有那些&nbsp; 并将边框和宽度属性移动到 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, and Javascript from the Ground Up。

【讨论】：

我刚刚添加了间隔真正的 qwik 来发布它。但谢谢你做到了。哈哈

【解决方案3】：

可能是 ul 上的 margin:auto ，它基本上将 ul 在 div 中居中。使用这种可能会出现意外行为的列表。

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

【讨论】：