0

ここのロゴの下部が少し重なっているのはなぜですか? 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;
    }
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 に依存させることができます。私はここで仮定しているだけです。欲しいもののフォトショップのモックアップはありますか? CSS に必要なものについて、より良いアイデアを提供してくれます。

于 2013-10-02T05:04:44.853 に答える