我正在使用图像作为列表项,但它不会与li
项目显示在同一级别上。我正在添加一个小提琴链接看看。
#container {
background: #e3e3e3;
margin-top: 50px;
}
#image {
margin: 20px;
width: 900px;
}
#title {
text-align: center;
font-family: Roboto;
background: -webkit-linear-gradient(#f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
li {
line-height: 30px;
font-family: Roboto;
font-size: 25px;
list-style-image: url('https://s3.postimg.org/4qsqurmsj/ic_item_play.png');
}
<div class="grid_16">
<ul>
<li>
Mark Zuckerberg began programming at a young age--when he was 12 he created a messaging program that his father used in his dental office, allowing the receptionist to notify him of new patients without yelling across the office.
</li>
<li>Zuckerberg took a computer graduate class at the nearby Mercy College while still in high school.</li>
<li>
His parents even hired a computer tutor to work with the young Zuckerberg, but the tutor admitted that it quickly became difficult to stay ahead of his pupil, referring to him as a "prodigy."
</li>
</ul>
</div>
答案 0 :(得分:2)
不要使用list-style-image
在更新的小提琴中查看我的更改 - https://jsfiddle.net/n2o79mL7/1/
我基本上从ul中删除了填充并添加了图像作为li的背景,使用background-position和padding来正确对齐列表项。
希望这有助于交配。
答案 1 :(得分:0)
试试这个:`
<li>
<div class="img>
</div>
Mark Zuckerberg began programming at a young age--when he was 12 he created a messaging program that his father used in his dental office, allowing the receptionist to notify him of new patients without yelling across the office.
</li>
<li>
<div class="img>
</div>
Zuckerberg took a computer graduate class at the nearby Mercy College while still in high school.</li>
<li>
His parents even hired a computer tutor to work with the young Zuckerberg, but the tutor admitted that it quickly became difficult to stay ahead of his pupil, referring to him as a "prodigy."
</li>
`
css中的变化:`
li
{
line-height:30px;
font-family:Roboto;
font-size:25px;
list-style:none;
}
div
{
background: url("https://s3.postimg.org/4qsqurmsj/ic_item_play.png") no-repeat 0px 0px;
}`