logo标签列表

CSS导航栏错误

css
3

如何移除这里显示的空格？

enter image description here

你好，我的代码出现了CSS Bug，问题如图片所示，多余的空格被输出。我从谷歌上复制了这段代码，但是找了很久也没有解决。以下是我的HTML代码：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">Photoshop</a></li>
                <li><a href="#">Illustrator</a></li>
                <li><a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">CSS</a>
                        <ul>

                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a>
                        <ul>
                        <li><a href="#">HTML</a></li>
                        <li><a href="#">HTML</a></li>

                        </ul>


                        </li>
                        </ul>


                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Articles</a>
            <ul>
                <li><a href="#">Web Design</a></li>
                <li><a href="#">User Experience</a></li>
            </ul>
        </li>
        <li><a href="#">Inspiration</a></li>
    </ul>
</nav>

并且CSS是

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 

    list-style: none;
    position: relative;
    display: inline-table;
}

    nav ul li {
        float: left;
    }

        nav ul li a {
            display: block; padding:5px;
            text-decoration: none;
        }


    nav ul ul {

        position: absolute; top: 100%;
    }
        nav ul ul li {

            float: none;position: relative;
        }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }
3个回答
1

您需要为ul元素同时删除填充和边距。例如，使用以下代码：

nav ul ul { margin-left: 0; padding-left: 0;}

这里有一个fiddle。
0

您可以使用 CSS 通用选择器 *：

*{
    margin:0;
    padding:0;
}

fiddle

在这里看一下通用选择器

0

试试这个

我删除了

从nav ul li a中删除了padding:5px;

并添加了

对于nav ul li a，添加了padding: 0 10px;

Fiddle链接：http://jsfiddle.net/rqELv/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接