5

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

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

目前，由于文本之间没有边框，无法识别，但Link4中“a”周围的空间小于Link1中文本周围的空间。第一个“li”元素的宽度奇怪地比第4个“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>

什么都有帮助！非常感谢你！

4

1 回答 1

3

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

于 2013-05-11T06:36:01.413 回答