4

特定の要素をターゲットにしたいのですが、ロゴに設定したプロパティが他のリストされたアイテムを上書きします。たとえば、ソリッドな境界線スタイルがあり、#nav のすべてのリスト項目を通過します。画像リンクのロゴをこれの例外にしたいだけです。ロゴは、ポートフォリオとプロジェクトのちょうど真ん中にあります。どうすればいいですか？

<!--NAVIGATION-->
    <ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li id="logo"><a href="index.html"><img src="assets/img/jp-logo.png" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

#nav{
list-style-type: none; /*gets rid of bullets*/
padding: 0;
border-color: #FFB405;
border-style: solid;
border-width: 1px 0;
text-align:center;
}
#nav li{
display: inline; /*display list horizontally*/
}
#nav a{
display: inline-block; /*don't break onto new lines and follow padding accordingly*/
padding:10px;
}
4

3 に答える 3

2

問題は、要素をターゲットにすることよりも、ロゴから境界線を削除することにあると思います。要素には ID があるため、ターゲット設定は簡単#logoです。

ボーダーからロゴを除外するために最初に行う必要があるのは、コンテナーではなくリスト項目にプロパティを適用する<ul>ことです。次に、次のルールでスタイルをオーバーライドします。

#nav li{
    display: inline-block; /*display list horizontally*/
    border-color: #FFB405;
    border-style: solid;
    border-width: 1px 0;
}

#nav #logo{
    border: 0;
}

最後に、このスタイルを適用すると、リスト アイテム間のギャップに気付くでしょう。これは、display:inline-blockプロパティと HTML マークアップの空白が原因です。これを適切に処理する複数の方法について、この回答を確認できます。

jsFidlleのソリューションの完全なデモを次に示します。

于 2013-09-07T05:46:59.053 に答える
1

このフィドルをチェック

あなたに与えて、border-topこれであなたの問題を解決してください。要素間に見られるギャップについては、親要素を設定してから要素に定義することで解決できます。border-bottomli#logoborder:none;lifont-size:0;font-size:npxli

HTML

<ul id="nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
    <li id="logo"><a href="index.html"><img src="http://placehold.it/50x50/" /></a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="classlist.html">Class List</a></li> <!--change URL later-->
    </ul>

CSS

ul#nav {
    margin:0;
    list-style-type: none;
    /*gets rid of bullets*/
    padding: 0;
    text-align:center;
    font-size: 0;
}
#nav li {
    margin:0;
    display: inline;
    /*display list horizontally*/
}
#nav a {
    display: inline-block;
    /*don't break onto new lines and follow padding accordingly*/
    padding:10px;
    border-top:1px solid #FFB405;
    border-bottom:1px solid #FFB405;
    margin:0;
    font-size: 16px;
}
ul#nav li#logo a {
    border-top:none;
    border-bottom:none;
}
于 2013-09-07T05:29:41.717 に答える
1

できるよ

#nav > #logo a

<a>これは、id がロゴ、タグ、および ID が nav の要素の子を持つ要素と一致します

あるいは

#logo a

で十分です。

于 2013-09-07T05:30:14.017 に答える