Question

我有这个问题。我搜索了网站，其他人也有类似的问题，但没有一个答案似乎有效。包括将行高设置为0px;并将所有边距/填充设置为0px。我使用Google Chrome的Inspect Element材料来检查边距/填充。我在我的“a”元素和“li”元素上盘旋，看看它们是否有任何不必要的填充或边距，但它们没有。

奇怪的是，他们在每个链接之间有一个小空格，没有被整个文档中的任何元素占据。

现在，由于文本之间没有边框，因此无法识别，但Link4中“a”周围的空间小于Link1中文本周围的空间。第一个“li”元素的宽度比第四个“li”容器宽4px，并且有一点白色空间。我想摆脱白色空间，任何想法？

以下是代码：

CSS：

html {
    overflow-y: scroll;
}
body {
    background-color: #ffdeff;
    overflow: hidden;
}
#wrapper {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
    background-color: white;
    border-left: 1px solid rgb(210, 210, 210);
}
#header {
    width: 1000px;
    height: 0px;
    overflow: hidden;
    margin: auto;
}
#header-toolbar {
    width: 1000px;
    list-style-type: none;
    border-radius: 3px;
    position: absolute;
}
#nav-position {
    position: absolute;
    float: left;
    padding: 0px;
    margin: 0px;
}
.nav-link-container {
    background-color: #FF66CC;
    display: inline;
    padding: 0px;
    text-align: center;
}
.nav-link {
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 0px;
    display: table;
    display: inline;
    margin: 0 auto;
}

HTML文档：

    <body>
        <script src="jquery-1.9.1.js"></script>
        <script>
        </script>
        <div id="wrapper">
            <div id="header">
                <div id="header-toolbar">
                    <ul id="nav-position">
                        <li class="nav-link-container">
                            <a class="nav-link">Link1</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link2</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link3</a>
                        </li>
                        <li class="nav-link-container">
                            <a class="nav-link">Link4</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="main"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

一切都有帮助！非常感谢你！

Answer 1

将<li>放入新行时会有一些空格。因此，一种解决方案是将它们全部添加到同一行中，如下所示：http://jsfiddle.net/6tzxj/1/

这两个元素之间的这个随机额外空间是什么（<li>）？</li>

1 个答案: