0

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

3 回答 3

2

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

于 2011-03-13T04:34:18.493 回答
1

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

于 2011-03-13T04:45:20.530 回答
0

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

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

于 2011-03-13T04:58:33.307 回答