Question

我正在我的页面上创建一个元素，如下所示：

<a href="">
<span class="benefits">
Free entry<br />
20% off in store<br />
First to know about latest courses
</span>
</a>

客户希望整个区域都可以点击，以及要用子弹点显示的好处列表。

据我所知，列表不能放在锚标签内？

我原本希望我可以在手边插入一个标签，我可以附加css列表样式类型的规则，但这不起作用。我尝试使用背景颜色制作固定宽度和高度的元素，然而，它在IE6中没有正确显示 - 我必须支持。

有什么想法吗？

Answer 1

尝试使用如下所示的HTML字符实体•：•

<a href="">
<span class="benefits">
&bull; Free entry<br />
&bull; 20% off in store<br />
&bull; First to know about latest courses
</span>
</a>

此处有更多字符实体：http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

设置显示：A（锚点）元素的块。然后将UL列表放入其中。

Answer 3

为什么不在每个列表项中创建一个具有相同锚点的无序列表？然后，您可以轻松地在每个锚标记内添加自定义项目符号，以便可以点击项目符号，并且可以使用填充而不是边距来分隔锚点，以便它们都能够触及。

Answer 4

据我所知，列表不能放在锚标签内？

你是对的，即使浏览器可能不关心，它也不是有效的HTML。

我的建议是使用DIV并通过JavaScript点击它。您可能仍希望在DIV中添加普通链接以便于访问。这样，您保留了标记的所有语义（有一个<a>链接和一个<ul>列表），然后获得您想要的最终结果。

<强> HTML：

<div id="box1" class="box">
  <a href="link"> ... </a>
  <ul> ... </ul>
</div>

<强> CSS：

.box {
  width: /* something */;
  height: /* something */;
  cursor: pointer;
}

<强> JavaScript的：

document.getElementById('box1').onclick = function() {
  window.location = 'link';
}

Answer 5

你可以用一个类包围各个行，然后使用CSS来添加装饰

添加一些左边距并附加背景图像。
尝试使用：before伪类并使用CSS内容添加到项目符号中。
我不记得这是否有效，但您也可以尝试设置span display = list-item和list-style-type = disc

Answer 6

也许这样的事情会有所帮助：

＆＃13;

a.error::before{    
    background-color: #be1c1c;
    border-radius: 1em;
    content: " ";
    display: inline-block;
    height: 0.35em;
    margin-right: 6px;
    width: 0.35em;
}
a.error{
    color:#be1c1c;
    text-decoration:none;
    display:block;
}
ul {
    padding:1em;
    display: block;
    list-style-type: disc;
}
ul li{
    color:#be1c1c;
}

＆＃13;

My links:
<a class="error" href="#"> item 1</a>
<a class="error" href="#"> item 2</a>
<a class="error" href="#"> item 3</a>
<br>
My list:
<ul>
  <li> item 1</li>
  <li> item 2</li>
  <li> item 3</li>
</ul>

＆＃13;

希望有所帮助！

要在锚链接中“看起来像”子弹点列表的元素

6 个答案: