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

我创造我的页面上的元素，像这样内部：元素“看起来像”子弹点列表的锚链接

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

客户希望整个区域点击，和利益，以显示列表与子弹点。

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

我希望我可以在手前插入一个标签，我可以将css列表样式类型的规则附加到那些不起作用的地方。然后，我尝试使该元素具有固定宽度和高度的背景色，但它并未在IE6中正确显示 - 我必须支持这一点。

任何想法？

来源

2010-10-06 Ant Ali

尝试使用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

来源

2010-10-06 16:19:10

我认为这可能是我必须这样做的方式......谢谢 – 2010-10-06 16:25:31

非常有帮助的答案！谢谢老兄！ – Suresh 2014-09-15 12:30:02

谢谢一个男人。我在emailer中需要这个，因为ul标签不起作用，迄今为止我能做的最好。 – Niraj 2017-03-30 09:08:17

设置显示：A（锚点）元素的块。然后把UL列表放在里面。

来源

2010-10-06 16:15:23

虽然这不会通过验证。 – 2010-10-06 16:19:24

@Ant - XHTML可能会讨厌你，但它在HTML5中没问题。 – Spudley 2010-10-06 16:21:34

@Spudley，不幸的是，我必须编码的目标受众（浏览器IE6 - 最新，FF，SF，CH等），我无法摆脱这种... – 2010-10-06 16:23:42

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

来源

2010-10-06 16:18:27 Mathletics

问题在于该块将有一个彩色背景，悬停后会改变。如果我遵循这个方法，那么我就不能改变整个元素的背景。 – 2010-10-06 16:22:21

据我所知列表不能放在锚标签里面？

你说的对，即使浏览器可能不在意，它也不是有效的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'; 
}

来源

2010-10-06 16:22:51 casablanca

我真的不想为这么简单的事情使用JavaScript。 – 2010-10-06 16:24:41

不幸的是，没有更简单的“有效”方法来使块可点击。 – casablanca 2010-10-06 16:26:42

对于阅读此答案的任何人：[现在完全有效地将块级元素换成锚标签。]（http://html5doctor.com/block-level-links-in-html-5/） – 2017-11-16 19:41:06

你可以用不同的线我n占据W/A类，然后使用CSS由

添加在一些左填充以及将背景图像添加的装饰品。
尝试使用：before伪类，并使用CSS内容添加项目符号。
我不记得，如果这个工程，但你也可以尝试设置跨度=显示列表项和列表样式类型=盘

来源

2010-10-06 16:31:36 mpdonadio

也许这样的事情可以帮助：

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; 
 
}

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>

希望它能帮助！

来源

2015-08-13 14:12:03

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

回答

相关问题