29

ナビゲーションメニューを作成しています。アンカータグがli要素の周りにラップされるようにcssを使用したいが、アンカータグはli要素の中にあります。

ここにhtmlがあります

<ul>
    <li><a href="">Uutiset</a></li>
    <li><a href="">Foorumi</a></li>
    <li><a href="">Kauppa</a></li>
    <li><a href="">Messut</a></li>
    <li><a href="">Asiakaspalvelu</a></li>
    <li><a href="">Nakoislehti</a></li>
    <li><a href="">Nae meidat</a></li>
</ul>

ここに私の少ないCSSがあります

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  li {
    padding: 2% 4%;
    border: 1px solid green;
    a {
        text-decoration: none;
        display: block;
    }
  }
}
4

5 に答える 5

58

a 内で許可される唯一の正当な要素<ul>は an<li>です。にアンカーを巻き付けることはできません<li>。これは、アンカーが他のブロック レベルの要素を囲むことができる HTML5 にも当てはまります。

CSS に含まれているものはほとんどありません。以下を追加するだけです。

a {
     text-decoration: none;
     display: block;
     width: 100%;
     height: 100%;
}

そして、あなたのアンカーは のスペース全体を埋めます<li>。

于 2012-08-23T07:11:54.113 に答える
4

でパディングをli使用line-heightしないでください。代わりにアンカー テキストに使用してください。これにより、li要素の高さ全体をカバーします。

ここで、この例を見てください

于 2012-08-23T07:18:59.933 に答える
2

Li をクリック可能にすることはできませんが、ここで提案されているように、a-link を li のサイズに拡張することができます: https://stackoverflow.com/a/1121754/1068495

于 2012-08-23T07:12:41.017 に答える
1

これを試して、li の代わりにアンカーにパディングを与えます。外で飼うことはできません。li の代わりにアンカーのスタイルを設定してください。li をラッパーのように振る舞わせます。

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  li {
    a {
        padding: 2% 4%;
        border: 1px solid green;
        text-decoration: none;
        display: block;
    }
  }
}
于 2012-08-23T07:17:47.873 に答える