0

私は ID を持つ を持って<div>います。これは ID#leftを持つ別のものを cotnains<div>します#container。中#containerは<ul>.

デフォルトでは、<li>が垂直方向に拡張されて、その中にすべてのテキストが含まれるようになると思いました。しかし、そうではありません。これはCSSです：

#left {
    width:200px;
}
#container {
    margin: 0 6px;
    overflow:hidden;
}

#container li {
    background:greenyellow;
    position: relative;
    border: #BF0000 thin solid;
    margin: 0 0 12px 0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    clear:both;
}
#container li:hover {
    background: #ffffff;
}
#container a {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

jsFiddleを使用することで、それがタグであり、タグの高さ<a>を壊しているのは CSS プロパティであることがわかりました。<li>ただし、 を変更すると、必要<a>なもう 1 つの効果が失われます。つまり、 の任意の場所をクリックし<li>てリンクをアクティブにすることができます。

<li>を縦に広げ<a>て、全体を埋めるようにタグを付けることはできます<li>か? なぜ現在のやり方に<a>影響を与える必要があるのか​​ わかりません。<li>

4

2 に答える 2

3

タグがコンテンツに基づいて高さを伸ばすことができる間、タグを適切にラップするようにしたいことを理解しています。この場合は、解決策についてhttp://jsfiddle.net/jBvQ8/16/にアクセスしてください。

処理するために何らかの変更やその他のユースケースが必要な場合は、私のjsfiddleを更新します。

#left {
    width:200px;
}
#container {
    margin: 0 6px;
}

#container li {
    background:greenyellow;
    position: relative;
    border: #BF0000 thin solid;
    margin: 0 0 12px 0;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    clear:both;
}
#container li:hover {
    background: #ffffff;
}
#container a {
    display:block;    
    width: 100%;


}
于 2013-09-08T08:39:36.277 に答える
-1

<a>あなたが何を望んでいるのかわかりませんが、適用された CSS で全体を li 内に入れたいと思うかもしれません。

タグposition:absoluteのCSSから削除するだけです。anchor

#container a {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

このフィドルを参照してください

pointerカーソルが必要な場合は、 liwithをホバーするときにanchor、href タグ (even href='#') をアンカーに指定するだけです

クリック可能なアンカーについては、このフィドルを参照してください

于 2013-09-08T08:19:49.400 に答える