0

为什么这里的标志在底部有轻微的重叠？下面给出了 CSS 和 HTML。我已经尝试覆盖与 logo<li>元素相关的 css 属性。但它没有用。

working fiddle

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <ul id="nav">
            <li><a href="#">WORK</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
            <li class="logo">
                    <a href="#" style="padding:0;">
                        <img src="logo.png" />
                    </a>
            </li>
        </ul>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
}

#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    #nav li {
        width: 20%;
        float: right;
        text-align: center;
    }

        #nav li a {
            display: block;
            padding: 0.5em 5px;
            text-decoration: none;
            font-weight: bold;
            color: #F2F2F2;
            -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
            box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
        }

    #nav a:link, #nav a:visited {
        background-color: #071726;
    }

    #nav a:hover, #nav a:active, #nav a:focus {
        background-color: #326773;
    }
4

1 回答 1

0

取决于您要完成的工作。

http://jsfiddle.net/66eKE/3/

#nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
    background: #000;
    float: left;
    width: 100%;
}

#nav li {
    margin: 0;
    padding: 0;
    width: 19%;
    text-align: center;
    display: inline-block;
    float: right;
}

#nav li a {
    display: block;
    padding: 0.5em 5px;
    text-decoration: none;
    font-weight: bold;
    color: #F2F2F2;
}

#nav a:link, #nav a:visited {
}

#nav a:hover, #nav a:active, #nav a:focus {
    background-color: #326773;
}

这样您就可以根据需要调整徽标的大小。菜单项可能浮动在 div 之外。在这种情况下，您需要浮动父级，使用溢出隐藏父级，或清除浮动。

重构 我重构了一些东西，例如父级上的阴影和背景颜色。这允许大部分效果依赖于父 div 而不是单个项目。我只是在这里假设。你有你想要的 Photoshop 模型吗？让我们更好地了解您对 CSS 的需求。

于 2013-10-02T05:04:44.853 回答