0

私はZenをテーマにしたDrupal7を使用しています。次の要件でナビゲーションバーにメニューを追加したい：1。背景：灰色2.仕切り「|」各メニュー項目の分割3.メニュー項目に下線なし

私はnavigation.cssファイルで＃1を達成することができました。2と3を達成する方法を教えてください。 - - - - - - - - - - - - - - - - - - - 答え - - - - - -------------------------

興味のある人のために、これが私が上記を達成する方法です：

  1. 背景を灰色に設定し、response-sidebars.cssを編集し、＃navigation code-blockの下に「background：grey」を追加します。

  2. 仕切り「|」の追加：navigation.cssを編集し、次のコードを追加します。

    #navigation li:before {
    content: "|";
 }

  3. メニュー項目に下線を付けず、navigation.cssを編集し、「text-decoration：none」と#navigationaを「#navigationul.linksli」コードパイルに次のように追加します。

    #navigation ul.links li,
#navigation ul.menu li,
#navigation a
{ 

  padding: 0px 5px;
  margin-right: 5px;
  border-radius: 5px 5px 5px 5px;
  float:left;
  color:white;
  vertical-align: middle;
  list-style: none;
  text-decoration: none;
}
4

1 に答える 1

1

作業している要素 (FOO) に次のようなスタイルを設定するだけではどうでしょうか。

FOO:before {
    content: "|";
}
FOO:first-child:before {
    content: "";
}

FOO は、nav で使用しているクラスまたは要素です。

ここで起こっているのは、疑似要素を使用して要素の前にパイプを配置していることです。最初の子は、最初のアイテムの前にパイプがないことを確認するためにそこにあります。(反対に、:after と :last-child を使用しても同様に効果的です)

于 2012-10-02T20:56:25.733 に答える