0

この質問の言い方がよくわからなかったので、お早めにお許しください。

基本的に、ワードプレスのテーマの垂直メニューにアコーディオン テンプレートを使用し、セットアップしましたが、コードにはリセットがあります。

コード A

/*---- basic reset--*/
* { 
margin: 0; 
padding:0; }

これは、ナビゲーションの私のスタイルの一番上にあり、スタイルの残りの部分は次のとおりです。

コード B

/*heading styles*/
#accordian h3 {
font-size: 12px;
line-height: 34px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
background: #1f84ba; 
background: linear-gradient(#1f84ba, #156691);
}

/*heading hover effect*/
#accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
}

/*list items*/
#accordian li {
list-style-type: none;
}
/*links*/
#accordian ul ul li a {
color: white;
text-decoration: none;
font-size: 11px;
line-height: 27px;
display: block;
padding: 0 15px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}

/*hover effect on links*/
#accordian ul ul li a:hover {
background: #003545;
border-left: 5px solid lightgreen;
}

/*Lets hide the non active LIs by default*/
#accordian ul ul {
display: none;
}

#accordian li.active ul {
display: block;
}

以下は私の編集です。これはコード B の上部に含まれます。

コード C (編集)

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 20px auto 0 auto;

ページの上部に基本的なリセット (コード A) があると、それがページ全体に適用されるようです (* が意味するものだと思いますが、私は CSS の新しいユーザーです)。

ページ全体のマージンとパディングを変更しないように、ナビゲーション (#accordion) にのみ適用したい。

どうもありがとうございます。これはおそらく非常に簡単なことだと思います。あまり手間がかからないことを願っています。

4

1 に答える 1

2

これを正しく理解している場合は、 に変更*するだけ#accordianです。例：

/*---- basic reset--*/
#accordian { 
margin: 0; 
padding:0; }

アップデート

次のコードを完全に削除します。

* {
margin: 0;
padding: 0; }

次に、ナビゲーションにマージンやパディングが必要ないと仮定して、アップデートで提供したコード (コード C) を次のように変更します。

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 0;
padding: 0;
}

操作の順序も忘れないでください。下の方に競合するコードがあることに気付くためだけに、何度も投げ出されました。疑わしい場合は!important、マージンとパディングのオプションを追加して、違いが生じるかどうかを確認してください。そうであれば、競合するコードがどこかにあると考えて間違いありません。

例：

#accordian {
background: #1f84ba;
width: 225px;
color: white;
margin: 0 !important;
padding: 0 !important;
}
于 2013-05-29T23:28:13.643 に答える