Question

遇到一些麻烦......我知道如何伸展<a>来填充他们所在的<li>？

我正在努力让链接更容易点击。

<nav class="main-nav">
    <ul>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
        <li class="menu-category"><a href="#">Link</a>
            <ul>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
                <li class="menu-item"><a href="#">Topic</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

最聪明的做法是让它们（a）display: block，但是它们仍然不会填满整个li，因为li包含填充。从li中删除填充。只在需要时给它们一个大小，并将所有其他标记（尤其是填充）应用于a元素本身。

Answer 2

我建议你不要将李的款式加上款式，但要删除所有款式（除必要品外，只使用元素。

Answer 3

好的......明白了！我需要的是display:inline-block;和padding:0;设置的<li>和<a>。然后我让<li>处理所有填充，从而填充{{1}}容器

解决方案：http://jsfiddle.net/T9nkf/1/

感谢帮助人员，不能和你一起做。

拉伸<a> to fill <li> in menu</li></a>

3 个答案: