Question

在我提出这个问题之前，我先说。我确实尝试了很长时间通过现有主题，但我找不到解决问题的方法。

我正在使用Bootstrap并且有一个水平的项目列表，其中包含图标和下面的文本链接。我想要的基本上是整个div可点击作为链接，而不仅仅是实际文本。

这是HTML：

<ul class="glyphs character-mapping">
                <li>
                  <div data-icon="a" class="icon"></div>
                  <a href="">Link 1</a>
                </li>
                <li>
                  <div data-icon="b" class="icon"></div>
                  <a href="">Link 2</a>
                </li>
</ul>

CSS：

.glyphs.character-mapping {

margin: 0px;
padding: 0px;
color: #000000;

}
.glyphs.character-mapping li {

margin: 0px 10px 30px;
display: inline-block;
width: 165px;
text-align: center;

}
.glyphs.character-mapping .icon {

margin: 10px 0px 10px 45px;
padding: 0px;
position: relative;
width: 70px;
height: 70px;
color: #FF0000;
overflow: hidden;
border-radius: 3px;
font-size: 68px; 

}

我尝试了几个与此相关的解决方案，包括不对'li'给出填充或余量，而是将'a'设为100％宽和高，但这也不起作用。

我在这里做错了什么想法？

非常感谢您提前寻求帮助。

Answer 1

你不能这样做：

<ul class="glyphs character-mapping">
    <li>
        <a href="">
            <div data-icon="a" class="icon"></div>
            Link 1
        </a>
    </li>
    <li>
        <a href="">
            <div data-icon="b" class="icon"></div>
            Link 2
        </a>
    </li>
</ul>

整个div和文本是否可点击？

使用链接使整个div可点击

1 个答案: