Question

我正在我的网站上工作，现在我正在开发一个新的导航，旧的导航使用内联表和表格单元格和东西，我想为它做一个下拉列表，所以我不得不移动使用nav，ul和li。 This is an image of what it looks like. 我希望标签（主页，论坛，服务器和信息）位于黑框顶部like this.

我让它看起来像我想要它看起来像，但它只适用于我的分辨率（它是一个边缘顶部：-1％;在内容框上）。我怎么能把它看成是我想要它的样子？我正在处理的页面的链接是vxservers.net/new。此外，是否有办法让标签尽可能最宽，但所有都适合这一行，注意其他标签？我的旧网站vxservers.net有一个带有display的标签容器：inline-table;和带有显示的标签：table-cell，它有效。

这是我的所有导航代码：

nav {
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
}

nav ul {
    width: 94%;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 10;
    display: inline-table;
    margin-left: 6%;
}

nav ul ul {
    display: none;
}

nav ul li {
    background-image: url('http://www.photos-public-domain.com/wp-content/uploads/2011/03/white-construction-paper-texture.jpg');
    text-align: center;
    display: table-cell;
    opacity: 0.5;
    font-family: 'Exo 2';
    width: auto;
    padding-top: 0.2%;
    padding-bottom: 0.2%;
    padding-left: 0.2%;
    padding-right: 0.2%;
    color: black;
    background-color: gray;
    float: left;
    border: 1px solid black;
    transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

nav ul li:hover {
    opacity: 1;
    background-color: white;
}

nav ul li a {
    display: block;
    width: auto;
    text-align: center;
    padding: 5px 40px;
    text-decoration: none;
    color: black;
}

nav ul li a:hover {
    animation: blink 1s linear infinite;
}

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

nav ul ul {
    background-color: gray;
    position: absolute;
    top: 100%;
    list-style: none;
    padding: 0;
    width: auto;
    margin-left: 0;
}

nav ul ul li {
    float: none;
    position: relative;
    width: auto;
    border: 1px solid black;
    margin-left: 0;
}

nav ul ul li a {
    padding: 5px 40px;
    color: black;
}

nav ul:after {
    content: "";
    clear: both;
    display: block;
}

谢谢。

Answer 1

试试这个：

nav > ul {margin-bottom: 0;}

ul上的默认边距正在创建它下面的空格。

为什么这个'保证金'在这里？

1 个答案: