1

まず、フィドルJSFIDDLEを参照してください

リストを作成しました

<div id="info_list">
 <ul>
  <li><a href="#">Milk</a></li>
  <li><a href="#">Eggs</a></li>
  <li><a href="#">Cheese</a></li>
  <li><a href="#">Vegetables</a></li>
  <li><a href="#">Fruit</a></li>
 </ul>
</div>

タグのcssは

#info_list ul li a{
    height: 30px;
    width: 230px;
    color: #AAA;
    line-height: 30px;
    text-decoration: none;
    cursor: pointer;
}

しかし、高さと幅を調整しても、各リストの空白の場所をクリックしても、まだ URL にアクセスできません。テキストをクリックするだけで機能します。

ありがとう！

4

4 に答える 4

3

heightでwidthある非フローティング要素には適用されません。display: inlineこれら<a>の要素はデフォルトです。

display値をblockまたはに変更しますinline-block。

于 2013-08-23T07:01:43.897 に答える
1

追加

display: inline-block

CSSに、私はそれがうまくいくはずだと思います。

于 2013-08-23T07:02:03.603 に答える
0 
#info_list ul li a{
    height: 30px;
    width: 230px;
    color: #AAA;
    line-height: 30px;
    text-decoration: none;
    cursor: pointer;
    display:block;
}

css 定義に css tage display:block を追加してください。

于 2013-08-23T07:43:46.103 に答える
0

私はしばしば「リンク スパナ」のテクニックを使用するのが好きです。リンクコンテナを任意のサイズにすることができ、リンクスパナは拡張してアンカーを高さ/幅の定義に合わせます。

JS フィドル: http://jsfiddle.net/duAT7/5/

<ul>
<li class="container">
    text
<a href="https://www.google.com">
   <span class="link-spanner"></span>
</a>
</li>
<li class="container">
    text
<a href="https://www.google.com">
   <span class="link-spanner"></span>
</a>
</li>
</ul>


.container{
  height: 30px;
  background: #2C2B29;
  padding:5px 15px 5px 15px;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  line-height: 30px;
  text-decoration: none;
  cursor: pointer;
  color:white;
  /*Important:*/
  position:relative;
  text-decoration: none;
  display: block;
}

/*Important:*/
.link-spanner{
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
}
于 2013-08-23T07:13:17.923 に答える