blocks|key|1137786|text|尝试使用如下所示的HTML字符实体&bull;：·|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1137787|<a+href="">
<span+class="benefits">
&bull;+Free+entry<br+/>
&bull;+20%25+off+in+store<br+/>
&bull;+First+to+know+about+latest+courses

</a>|code-block|syntax|javascript|1137788|更多字符实体在这里：http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references|1137789|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references^0|H|6|0|0|A|25|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Try using the HTML character entity <code>&amp;bull;</code> which looks like this: &bull;

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

more character entities here: <a href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="noreferrer">http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references</a>

blocks|key|1887188|text|也许像这样的东西可能会有帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1887189|​|1887190|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;
}|code-block|syntax|javascript|1887191|My+links:
<a+class="error"+href="#">+item+1</a>
<a+class="error"+href="#">+item+2</a>
<a+class="error"+href="#">+item+3</a>
 
My+list:
<ul>
++<li>+item+1</li>
++<li>+item+2</li>
++<li>+item+3</li>
</ul>|1887192|1887193|希望它能帮上忙！|1887194|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

Maybe something like this could help:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>My links:
&lt;a class="error" href="#"&gt; item 1&lt;/a&gt;
&lt;a class="error" href="#"&gt; item 2&lt;/a&gt;
&lt;a class="error" href="#"&gt; item 3&lt;/a&gt;
&lt;br&gt;
My list:
&lt;ul&gt;
 &lt;li&gt; item 1&lt;/li&gt;
 &lt;li&gt; item 2&lt;/li&gt;
 &lt;li&gt; item 3&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>


Hope it help!

blocks|key|3241488|text|为A(锚点)元素设置display:block。然后将UL列表放入其中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3241489|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Set display:block for the A (anchor) element. Then put the UL list inside it.

blocks|key|3241509|text|为什么不在每个列表项中创建一个具有相同锚点的无序列表呢？然后，您可以轻松地在每个锚点标记中添加自定义项目符号，以便这些项目符号是可单击的，并且您可以使用填充而不是边距来分隔锚点，以便它们都相互接触。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3241510|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Why not just make an unordered list with the same anchor inside each list item? You can then easily add custom bullets inside each anchor tag so that the bullets are clickable, and you can using padding instead of margins to space the anchors so that they are all touching.

blocks|key|1882828|text|据我所知，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1882829|列表不能放在锚标记内？|blockquote|1882830|1882831|1882832|您说得对，即使浏览器不关心，它也不是有效的HTML。|1882833|我的建议是使用DIV，并使其可通过JavaScript点击。出于可访问性的目的，您可能仍然希望在DIV中添加一个普通链接。这样，您保留了标记的所有语义(有一个<a>链接和一个<ul>列表)，但仍能得到您想要的最终结果。|offset|length|style|CODE|1882834|HTML：|1882835|<div+id="box1"+class="box">
++<a+href="link">+...+</a>
++<ul>+...+</ul>
</div>|code-block|syntax|javascript|1882836|CSS:|BOLD|1882837|.box+{
++width:+/*+something+*/;
++height:+/*+something+*/;
++cursor:+pointer;
}|1882838|JavaScript:|1882839|document.getElementById('box1').onclick+=+function()+{
++window.location+=+'link';
}|1882840|entityMap^0|0|0|0|0|0|27|3|2F|4|0|0|0|0|4|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|17|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|18|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|19|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1B|8|@$K|1C|L|1D|M|N]|$K|1E|L|1F|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Q|3|R|5|S|7|1H|8|@]|9|@]|A|$T|U]]|$1|V|3|W|5|6|7|1I|8|@$K|1J|L|1K|M|X]]|9|@]|A|$]]|$1|Y|3|Z|5|S|7|1L|8|@]|9|@]|A|$T|U]]|$1|10|3|11|5|6|7|1M|8|@$K|1N|L|1O|M|X]]|9|@]|A|$]]|$1|12|3|13|5|S|7|1P|8|@]|9|@]|A|$T|U]]|$1|14|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|15|$]]

<blockquote>
 As far as i am aware lists cannot be placed inside anchor tags?
</blockquote>

You're right about that, and even though browsers may not care, it's not valid HTML.

My suggestion would be to use a DIV and make it clickable via JavaScript. You may still want to add a normal link inside the DIV for accessibility purposes. This way, you retain all the semantics of the markup (there's an <code>&lt;a&gt;</code> link and a <code>&lt;ul&gt;</code> list) and yet get the end result you wanted.

HTML:

<pre><code>&lt;div id="box1" class="box"&gt;
 &lt;a href="link"&gt; ... &lt;/a&gt;
 &lt;ul&gt; ... &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

CSS:

<pre><code>.box {
 width: /* something */;
 height: /* something */;
 cursor: pointer;
}
</code></pre>

JavaScript:

<pre><code>document.getElementById('box1').onclick = function() {
 window.location = 'link';
}
</code></pre>

blocks|key|3241596|text|您可以在span+w/+a类中包装各种行，然后使用CSS通过以下方式添加装饰|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3241597|3241598|添加了一些左侧填充并附加了背景图像。|ordered-list-item|3241599|尝试使用:+you伪类并使用CSS内容添加项目符号。|3241600|我不记得这是否有效，但您也可以尝试设置span+display=list-item和list-style-type=disc|3241601|3241602|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|P|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|Q|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|L|$]]

You can wrap the various lines in spans w/ a class, and then use CSS to add the decorations by

<ol>
<li>Adding in some left padding and attaching a background image.</li>
<li>Try using the :before pseudo class and using CSS content to add in the bullet.</li>
<li>I can't remember if this works, but you can also try setting the span display=list-item and list-style-type=disc</li>
</ol>

I am creating an element on my page like so:

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

The client wants the whole area clickable, and the list of benefits to display with bullet points.

As far as i am aware lists cannot be placed inside anchor tags?

I had hoped I could insert a tag before hand that I could attach the css list-style-type rules to however that didn't work. I tried then making that element a fixed width and height with a background colour, however, it didnt display properly in IE6 - which I have to support.

Any ideas?

Elements to 'look like' a bullet point list inside an anchor link

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在我的页面上创建了一个元素，如下所示：<a href="">Free entry 20% off in store First to know about latest courses</a>客户希望整个区域都可以点击，并用项目符号显示好处列表。据我所知，列表不能放在锚标记中？我曾希望我可以事先插入一个标记，以便附加

问元素“看起来像”锚链接内的项目符号列表。
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素“看起来像”锚链接内的项目符号列表。EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素“看起来像”锚链接内的项目符号列表。
EN