0

遇到一些麻烦...知道如何伸展我<a>的 's 来填补<li>他们坐的 's 吗？

我试图使链接更容易点击。

这是我的 jsFiddle：http: //jsfiddle.net/T9nkf/

<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>
4

4 回答 4

2

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

于 2013-06-24T19:29:37.243 回答
0

好吧……想通了！我需要的是display:inline-block;并padding:0;设置在<li>'s 上。然后我让<a>' 处理所有填充，从而填充<li>容器

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

感谢各位大侠的帮助，你这事做不来。

于 2013-06-24T19:44:25.287 回答
0

我建议您不要使用项目设置 li 的样式，而是删除它们的所有样式（除了必要的样式并且只使用 a 元素。

于 2013-06-24T19:38:25.433 回答
0

如果您使用 Bootstrap，则有一个名为stretched-link的类：

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>
于 2021-12-01T19:07:34.853 回答