Question

由于某种原因，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>

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, and Javascript from the Ground Up。

Answer 3

可能是那个margin：在ul上自动，这将基本上以div为中心。有了这种可能出乎意料的列表。

您是否正在使用像“检查元素”工具内置的firebug或chrome等开发人员工具来仔细查看？它们将自己突出显示每个单独的元素，并准确地告诉您用于margin / padding / everything的值。它真的可以加速这种问题的解决。另一个简单的方法来看看正在发生的事情是为所有东西提供不同颜色的1px边框。这样你就可以更好地判断问题是在ul内部还是外部，或者甚至以某种方式解决问题。

DIV内部左侧奇怪的间距有帮助！

3 个答案: