-1

のリストで構成されるメニューがあります<li>。それぞれ<li>に があり<a>ます。それぞれ<a>に があり<img>ます。

私の問題は、クリックしたときにマウスを動かしたときにも、クリックの一部の領域（の右に近い<img>）がa機能しないことです

<ul class="menu">
  <li class="user_mg_menu"><a href="#/someurl">TEST<img src="//placehold.it/40/0000ff" /></a></li>
  <li class="group_mg_menu"><a href="#/someurl">TEST1<img src="//placehold.it/40/ff0000" /></a></li>
  <li class="sms_menu"><a href="#/someurl">TEST2<img src="//placehold.it/40/00ff00" /></a></li>
</ul>

これは私のcssです

.menu_container {
  padding: 15px 0;
}

.menu  a:active , .menu a:visited , .menu  a {
  color:#336699;
}
.menu li:active {
  margin-right: 8px;
  margin-left: 2px;
  margin-top:4px;
}

.menu {
  list-style: none;
  margin:0 51px 6px 0;
  height: 50px;
}

.menu li {
  width: 185px;  
  border-radius: 8px;
  height: 50px;
  float: right;
  margin-right:10px;
  box-shadow: 0 0 5px 2px #888886;
}

.menu li a {
  line-height: 50px;
  text-decoration: none;
  padding-right: 20px;
  font-size: 15px;
  display: block;
}

.user_mg_menu {  
  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;

  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ; 
}

.group_mg_menu {
  background: -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;

  background:  -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;
}
.report_menu
{
  background: /*url('../img/reportMain.png') no-repeat 10px 5px ,*/ -moz-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;


  background: /*url('../img/userManagement.png') no-repeat 10px 0,*/ -webkit-linear-gradient(top, #f5f7f8, #dcdddf 50% , #f5f7f8 ) ;
}

.menu  li img {
  float: left;
  margin-left:10px;
  margin-top:-5px;
}

ここに Js fiddleがあります。http://google.comに設定されたリンク は、画像の右側を閉じるをクリックしても機能しません。

CodePenデモ

4

1 に答える 1

0

タグpaddingからを削除する必要があります。a

.menu li a {
    line-height: 50px;
    text-decoration: none;
    font-size: 15px;
    display: block;
}
于 2013-08-03T21:18:02.767 に答える