問題描述
很簡(jiǎn)單的問題，但我不確定是否可能.我想在所有 <h1> 元素中添加一個(gè)圖像作為項(xiàng)目符號(hào).我知道我可以通過以下方式實(shí)現(xiàn):
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1> elements. I know I can achieve this by:
<span class='bullet'></span><h1>My H1 text here</h1>
用css:
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
但是有沒有一種自動(dòng)的方法來做同樣的事情?我在想這樣的事情:
but is there an automatic way to do the same thing? I was thinking something like:
h1{
list-style-image: url('bullet.png');
}
但這似乎只適用于 <ul> 元素.我真的不想在 <h1> 元素之前的任何地方粘貼 <span> 元素.有什么想法嗎?
but that only seems to work with <ul> elements. I really don't want to have to paste the <span> element everywhere before the <h1> element. Any ideas?
推薦答案
雖然您可以使用 :before 偽選擇器來添加-"或?"元素前面的字符，它并沒有真正讓你的元素表現(xiàn)得像一個(gè)要點(diǎn).你的元素可能看起來像一個(gè)要點(diǎn)，但這只是一個(gè)骯臟的黑客，真的，應(yīng)該避免！
While you can use a :before pseudo-selector to add a "-" or "?" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
要使您的元素 (1) 看起來像一個(gè)項(xiàng)目符號(hào)點(diǎn)并且 (2) 行為像一個(gè)項(xiàng)目符號(hào)點(diǎn)，您應(yīng)該設(shè)置 display、list-style-type 和該元素的 list-style-position 屬性.
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display, list-style-type and list-style-position attributes of that element.
h1 {
display: list-item; /* This has to be "list-item" */
list-style-type: disc; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type */
list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}<h1>My H1 text here</h1>http://jsfiddle.net/L15a53cb/
這篇關(guān)于我可以使用 CSS 為任何元素添加項(xiàng)目符號(hào)嗎?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！