Html 在锚链接内“看起来像”项目符号列表的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3874602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Elements to 'look like' a bullet point list inside an anchor link
提问by Ant Ali
I am creating an element on my page like so:
我正在我的页面上创建一个元素，如下所示：
<a href="">
<span class="benefits">
Free entry<br />
20% off in store<br />
First to know about latest courses
</span>
</a>
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.
我曾希望我可以事先插入一个标签，我可以将 css list-style-type 规则附加到但是这不起作用。然后我尝试使用背景颜色使该元素具有固定的宽度和高度，但是，它没有在 IE6 中正确显示 - 我必须支持。
Any ideas?
有任何想法吗？
回答by RBW_IN
Try using the HTML character entity •which looks like this: •
尝试使用如下所示的 HTML 字符实体•： •
<a href="">
<span class="benefits">
• Free entry<br />
• 20% off in store<br />
• First to know about latest courses
</span>
</a>
more character entities here: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
更多字符实体在这里：http: //en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
回答by Moun Sec
Maybe something like this could help:
也许这样的事情会有所帮助：
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>Hope it help!
希望有帮助！
回答by ?ime Vidas
Set display:block for the A (anchor) element. Then put the UL list inside it.
为 A（锚点）元素设置 display:block。然后把UL列表放在里面。
回答by Mathletics
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.
为什么不在每个列表项中创建一个具有相同锚点的无序列表？然后，您可以轻松地在每个锚点标签内添加自定义项目符号，以便项目符号可点击，并且您可以使用填充而不是边距来分隔锚点，以便它们都相互接触。
回答by casablanca
As far as i am aware lists cannot be placed inside anchor tags?
据我所知，列表不能放在锚标签内？
You're right about that, and even though browsers may not care, it's not valid HTML.
你是对的，即使浏览器可能不在乎，它也不是有效的 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 <a>link and a <ul>list) and yet get the end result you wanted.
我的建议是使用 DIV 并通过 JavaScript 使其可点击。出于可访问性目的，您可能仍希望在 DIV 中添加一个普通链接。通过这种方式，您可以保留标记的所有语义（有一个<a>链接和一个<ul>列表），但仍会得到您想要的最终结果。
HTML:
HTML：
<div id="box1" class="box">
<a href="link"> ... </a>
<ul> ... </ul>
</div>
CSS:
CSS：
.box {
width: /* something */;
height: /* something */;
cursor: pointer;
}
JavaScript:
JavaScript：
document.getElementById('box1').onclick = function() {
window.location = 'link';
}
回答by mpdonadio
You can wrap the various lines in spans w/ a class, and then use CSS to add the decorations by
您可以将各种行包装在带有类的跨度中，然后使用 CSS 添加装饰
Adding in some left padding and attaching a background image.
Try using the :before pseudo class and using CSS content to add in the bullet.
I can't remember if this works, but you can also try setting the span display=list-item and list-style-type=disc
添加一些左填充并附加背景图像。
尝试使用 :before 伪类并使用 CSS 内容添加到项目符号中。
我不记得这是否有效，但您也可以尝试设置 span display=list-item 和 list-style-type=disc
