0

私は通常、リンクに表示ブロックを配置して、テキストだけでなくボタンのすべての div をアクティブにします。しかし、この場合、で使用する必要があり、display:inline-blockこれul liにより他の表示ブロックが無効になると思いますか?. li内部のテキストだけでなく、すべてをアクティブにする方法は?

例を次に示します: http://jsfiddle.net/mPGDe/

HTML:

<ul class="menu">
    <li><a href="#">first</a></li>
    <li><a href="#">second</a></li>
    <li><a href="#l">third</a></li>
</ul>

CSS:

ul {
    margin:40px auto;
    list-style-type:none;
    padding:0;
    text-align: center;
}

ul li {
    position: relative;
    padding: 7px 17px;
    margin-right: 10px;
    background-color: #f2f2f2;
    display: inline-block; /* does it disable display block? */
}

ul li a {
    display:block;/* usually to make active all the zone, but here it does not work */
}
4

1 に答える 1

1

パディングをのa代わりにli

ul li {
    position: relative;
    margin-right: 10px;
    background-color: #f2f2f2;
    display: inline-block; /* does it disable display block? */
}

ul li a {
    padding: 7px 17px;
    display:block;/* usually to make active all the zone, but here it does not work */
}

http://jsfiddle.net/gaby/mPGDe/1/のデモ

于 2013-04-29T13:43:28.337 に答える