1

完全にクリック可能なナビゲーション リンク (リストを使用) を設定しようとしています。ただし、現在クリックできるのはテキストと画像のみです。表示ブロックが機能していないようです。

これが最終結果です: http://rec.wordpress.uconn.edu

#program-buttons {
display:block;
width:100%;
height:65px;
background-color:#cccccc;   
}
.program-button {
display:block;
float: left;
font-size: 14px;
height: 45px;
line-height: 17px;
list-style-type: none;
margin:0;
padding: 10px;
width: 208px;
vertical-align:middle;
border-left: solid 1px #ffffff;
border-right: solid 1px #8C8C8C;
transition: background 0.4s ease;
-webkit-transition: background 0.4s ease;
-o-transition: background 0.4s ease;
-moz-transition: background 0.4s ease;
 }
.program-button:hover {
background-color:#202631;
}

#program-buttons .program-button a {
display:block;
color:#fff;
font-weight:bold;
}
#program-butt ons .program-button a:hover {
text-decoration:none;
}

#program-buttons img {
background-clip: border-box;
background-color: rgba(0, 0, 0, 0);
background-image: none;
background-origin: padding-box;
border-bottom-color: rgb(255, 255, 255);
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: rgb(255, 255, 255);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(255, 255, 255);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(255, 255, 255);
border-top-style: solid;
border-top-width: 1px;
box-shadow: rgba(0, 0, 0, 0.199219) 1px 2px 2px 0px;
color: rgb(46, 44, 42);
cursor: auto;
display: block;
float: left;
height: 45px;
list-style-type: none;
margin-right: 10px;
margin-top: 0px;
text-align: -webkit-auto;
text-decoration: none;
text-shadow: 
rgba(255, 255, 255, 0.296875) 0px 1px 0px;
width: 60px;
}

<ul id="program-buttons" class="clearfix">
   <li class="program-button"><a href="#"><img src="http://www.recsports.ufl.edu/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>Intramural<br> Sports</span></a></li>
   <li class="program-button"><a href="#"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>BodyWise</span></a></li>
   <li class="program-button"><a href="#"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>UConn<br> Outdoors</span></a></li>
   <li class="program-button"><a href="#"><img src="/images/uploads/KanJam_thumbnail_1.jpg" width="60" height="45" alt="Title"> <span>Drop-In<br> Rec</span></a></li>
</ul>
4

3 に答える 3

3

問題は、liタグに10pxのパディングがあることです。a代わりに、そのパディングをタグに移動してください。

編集：そして、固定された高さを削除します。

于 2013-02-20T20:39:50.060 に答える
0

実際、あなたは何をしているのか誤解していると思いますdisplay:block。あなたのliアイテムは決してクリック可能ではありません.それは彼らの目的ではありません. a要素が現在使用しているすべてのスペースを占めるように、要素のスタイルを設定する必要がありますli。

簡単な解決策は、要素から「program-button」クラスを削除し、li要素に適用することaです。これにより、すべてのスタイリングがリンク上で直接行われ、それ以上の変更は必要ありません (サイトの Chrome で確認してください)。

于 2013-02-20T20:43:36.513 に答える
0

width:100%にとを追加することをお勧めしheight:100%ますhref。

li.program-button a {
  ... etc ...
  display: block;
  width: 100%;
  height: 100%;
}

ボタン領域全体をクリック可能にしたい場合は、パディングを から に移動することを検討しLIsてくださいhref。

li.program-button {
  ... etc ...
  width: 228px;
  height: 65px;
  padding: 0px;
}

li.program-button a {
  ... etc ...
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
}
于 2013-02-20T20:44:24.637 に答える