Question

为什么这里的徽标底部略有重叠？ CSS和HTML如下。我已经尝试覆盖徽标<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;
    }

Answer 1

取决于你想要完成的事情。

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的需求。

徽标在css中重叠？

1 个答案: