0

html'n'css を学び始めましたが、説明できないことが 1 つあります。リンクのように機能する div を持つ html ファイルがあります (アプリケーションでは、div サイズを設定していて、ボックス全体をリンクのように機能させたいと考えています)。ただし、div 内のテキストの下線装飾を削除することはできません (例の Link1 には常に下線が引かれています)。セレクターは「リンク要素内の任意の div」である必要があり、リンクが赤であるため、正しいと思います。

下線を明示的に削除するための特別なクラスを導入することでこれを行うことができました (例の Link2 は問題ありません) が、すべてのメニュー スタイルを 1 か所にまとめたいと考えています。

問題は、このようなデコ (Link1) の削除が機能しない理由を誰かが説明できるかどうかです。さらに、メニューの構成が良いスタイルであるかどうか、またはコードを再編成する必要があるかどうかを尋ねたいと思います。たとえば、次のようにします。

<a href="index.html" class="menuitem"><div>Blabla</div></a>

そしてスタイル：

a.menuitem {...}
a.menuitem div {width:...;}

最小限の（非）動作例を次に示します。

    <html>
    <head>
    <style>
            a div.menuitem {
              text-decoration: none;
              color: red;
            }
            .remove-under {
              text-decoration: none;
            }
    </style>

    </head>
    <body>
            <a href="./index.html">
                    <div class="menuitem">Link1</div>
            </a>
            <a href="./index.html" class="remove-under">
                    <div class="menuitem">Link2</div>
            </a>
    </body>
    </html>

どうもありがとう！

4

3 に答える 3

2

これは理想的なソリューションではありません。インライン要素内にブロック レベルの要素を配置するべきではありません。

ただし、絶対に機能させる必要がある場合はdisplay: inline-block;、div に追加できます。

a div.menuitem {
    text-decoration: none;
    color: red;
    display: inline-block;
    width:100%;
}
.remove-under {
    text-decoration: none;
}
于 2012-11-07T14:37:56.587 に答える
2

意味的に言えば、 a<div>は 内に入るべきではありません<a>。div タグは、アンカー タグがインライン要素であるブロック要素です。ブロック要素は、インライン要素内に入ってはなりません。代わりに<span>、インラインで何か別のスタイルを設定する必要がある場合に使用しますが、あなたの場合、さらに、より適切に機能するクラスを に追加できます<a>。

新しいコードは次のとおりです。

<a href="./index.html" class="menuitem">
    Link1
</a>
<a href="./index.html" class="remove-under menuitem">
    Link2
</a>

スペースを入れることで要素に複数のクラスを持たせることができるので、Link2 には「remove-under」と「menuitem」というクラスがあります。

CSS を更新して下線を削除します。

.remove-under {
    text-decoration:none;
}

タグ全体を (テキストだけでなく) リンクにするために、menuitem クラスに次の css を追加します。

.menuitem {
    display:block;
    width: 100px; 
    height: 50px; /* or whatever your desired width and height */
    background: red; /* to show that the whole anchor will be link, not just text */
}
于 2012-11-07T14:36:29.183 に答える
0

ここに 2 つの問題があります。

  1. あなたはこのようなことをすることはできません

    <a href="#"><div></div></a>

    a はインライン要素であるためです。ここで行うことは、無効な HTML コードです。次のようにします。

    <div><a href="#"></a></div>

  2. div 要素に text-decoration:none を適用しようとすると、それを a 要素に適用する必要があります。

    a {text-decoration:none;}
于 2012-11-07T14:32:15.440 に答える