0

HTML + CSSの水平タブバーをきれいにスタイリングして、アクティブなタブに対して非表示または非表示になっている線がタブバーの下部に表示されるようにするにはどうすればよいですか？

言い換えれば、私はStackOverflowがそのタグに対して行うのと同じことをしようとしています： ここに画像の説明を入力してください

私のタブバーは順序付きリストとして設定されています

ul
{
  list-style: none;
}
li
{
  float: left;
}

更新：Firebugを使ってサイトをざっと見て、どのように動作するかを確認しましたが、すぐに詳細に行き詰まってしまうような気がします。たとえば、StackOverflowのバージョンには、div全体の下部に境界線があり（意味があります）、アクティブなタブの下部に白い境界線があります（意味があります）が、アクティブなタブの境界線がdivの境界線と重なるようになります（そして私はそれがどのようにそれを行うのかよくわかりません）。TwitterBootstrapも同様のことをしているようです。コンテナの境界線の一部がコンテンツの境界線と重なる部分が、CSSをコピーして調整するのではなく、機能しているように見えるものが得られるまでどのように機能するかという一般的な概念を理解しようとしています。

4

4 に答える 4

1

あなたがする必要があるのは、<ul>（それが横に伸びるように）下の境界線を置き、次に<li>'sa選択されたクラスを与え、それを1ピクセル高い高さにすることです。

これは非常に簡単な例です：http：//jsfiddle.net/V6gzS/

于 2013-01-18T14:54:32.810 に答える
0

正しい方向を示すために、firebugまたはchromes element inspectorを使用して、必要なビットを選択するだけです。たとえば、このサイトでは、探しているものはタブと呼ばれ、そのようなスタイルになっています。

#tabs a.youarehere {
background: #fff;
border: 1px solid #ccc;
border-bottom-color: #ffffff;
color: black;
font-size: 120%;
height: 30px;
line-height: 28px;
margin-top: 3px;
padding: 0px 11px 0px 11px;
 }

これはその一部にすぎませんが、コードを見ると多くのことを学ぶことができます

于 2013-01-17T15:15:03.570 に答える
0

私が理解しているように、あなたは水平のボトムラインで、あなた自身でボタンを作ることができます。

その場合は、この水平線がborder-bottom: solid 1px #CCC各ボタンのプロパティとして作成されていることを確認してください（色が異なる場合があります）。id="current"次に、各ページで、アクティブなページである1つのボタンにIDを追加します。CSSでは次のように記述します。

#current {
  border: solid 1px #CCC;
  border-bottom: 1px solid white;
}

問題がある場合は、次!importantのように追加することで解決できる可能性があります。

  border-bottom: 1px solid white !important;

したがって、これはCSSの4行の追加コードと、各ファイルの1つの追加HTML属性です。

動的メニューの場合

すべてのページで静的ではないが、動的に生成されたり、含まれているファイルに配置されたりするメニューがある場合、上記は不可能です。その場合、個別の各ページに新しいIDを簡単に追加することはできません。

その場合、属性を動的に追加することができます。if{...}PHPなどのサーバー側言語を使用している場合は、URLやGETリクエストなどをチェックするコマンドを簡単に設定できる可能性があります。それ以外の場合は、JavaScriptを使用して各ボタンをチェックしid、ボタンのテキストがページのヘッダーと等しい場合は属性を追加します。

ご理解頂けるとありがたいです。幸運を。

于 2013-01-17T15:34:08.657 に答える
0

私はこのようにしました：

ul {
    list-style-type:none;
}
li{
    float: left;
    border-bottom: 1px solid #CCC;
}
li:hover{
    float: left;
    border: solid 1px #CCC;
    border-bottom:none;
}
于 2017-01-20T21:29:26.863 に答える