Html 在 li 内定位跨度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11370675/
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
positioning a span within a li
提问by Gezzamondo
ive got a list set up with a background image set to the left of each of the lines of text although they dont seem to line up, i put a span around the text to try and reposition the text but it didnt seem to work
我设置了一个列表，背景图像设置在每行文本的左侧，尽管它们似乎没有对齐，但我在文本周围放置了一个跨度以尝试重新定位文本，但它似乎不起作用
heres the code im using..
继承人的代码我使用..
HTML
HTML
<ul class="price-features">
<li><span>One page website with contact form</span></li>
<li><span>Social Media Integration</span></li>
<li><span>One year hosting + Domain registration</span></li>
</ul>
CSS
CSS
.price-features{
margin-top:30px;
}
.price-features li{
background-image:url(/images/prices/orange-arrow.png);
background-repeat:no-repeat;
background-position:left;
padding-left:15px;
height:30px;
border-bottom:#999 1px solid;
background-color:#996;
}
.price-features li span{
padding-top:5px;
}
回答by Jesse Bunch
Padding only affects block-level elements. You'll need to either change your spanto be a block-level element or override the default displayto be blockor inline-block.
填充仅影响块级元素。您需要将您的span元素更改为块级元素，或者将默认值覆盖display为block或inline-block。
.price-features li span{
display: block;
padding-top:5px;
}
