0

私の問題を説明する最良の方法は、あなたに見せることだと思います。

http://yourinternship.hailstormcommerce.com/?page_id=21

左側のサイドバーには、 を使用するウィジェットがあります。これは、最初に を適用しulた瞬間に適用され、その後、すべての子の境界線がオフになります。bottom-borderlili

私の問題は、ウィジェットの最上部にある「あなたのインターンシップ」の境界線が、サブメニューが終了するまで、つまり「宿泊施設」の上に表示されないことです。しかし、残りのメニューページと同様に、「あなたのインターンシップ」の下にまっすぐにしたい. したがって、基本的には全体に隣接していますli。なぜこれが起こっているのか理解しています。それを回避する唯一の方法は、境界線を下に置くことでしたul li aが、問題は、境界線の幅などを制御するために(などを使用して)非常に面倒になることpaddingです。

最初のリンクに境界線を適用する方法について何か提案はありますか?

また、併せて「お問い合わせ」の最後の枠を外していただくことは可能でしょうか？

私はここで 2 番目の質問をしていますが、全体的な問題はワードプレスのウィジェットの特定の部分のスタイル設定に関係していると思います。

助けてくれてありがとう。混乱させてしまったかもしれないので、質問があれば教えてください。乾杯

4

2 に答える 2

1

それはあなたが望むより少し厄介かもしれませんが、ここに提案があります。

「あなたのインターンシップ」の真下に線を引くには（ただし、「あなたの宿泊施設」の上にそれを維持する）、次のようにすることができます。

#menu-your-internship-sidebar .current_page_parent > a {
    display: block
    border-bottom: solid 1px #DDD;
 }

[お問い合わせ]の下の最後の境界線を削除するには、次のようにli：last-childの下の境界線を0に設定します。

#menu-your-internship-sidebar li:last-child {
    border: none
}

編集：「あなたの宿泊施設」の上の境界線を削除したい場合：

#menu-your-internship-sidebar > li.current-page-parent {
    border: none;
}
于 2012-10-18T22:54:47.483 に答える
1

それが可能だ。学習できる簡単な例を作成しました。

<ul class="widget">
  <li class="active">Your Internship
    <ul>
      <li>Benefit of our program</li>
      <li>Students</li>
      <li>University</li>
      <li>Why Choose Us</li>
      <li>Your Internship Process</li>
      <li>Your Language Course</li>
    </ul>
  </li>
  <li>Your Accomodation</li>
  <li>Your Employers</li>
  <li>Information for Interns</li>
  <li>Apply Now</li>
  <li>Contact Us</li>
</ul>

アクティブなアイテムと最後のアイテムの境界線を取り除くには、次の疑似セレクターを使用します。

.widget > li:last-child, .active {
  border: none;
}

" " クラスに境界線を再度追加するためにactive、疑似要素を使用しました。

.active:before {
  content: "";
  width: 100%;
  position: absolute;
  top: 25px;
  border-bottom: 2px solid salmon;
}

デモ

于 2012-10-18T22:47:09.303 に答える