列表造型问题

我使用下面的CSS列表造型问题

#basic li, #standard li, #premium li { 
padding-left: 30px; 
padding-top: 3px; 
padding-bottom: 5px; 
background-image: url(../assets/misc/blue_yes.png); 
background-repeat: no-repeat; 
background-position: 0 .5em; 
border-bottom: 1px dotted #CCC; 
} 
#high li { 
padding-left: 30px; 
padding-top: 3px; 
padding-bottom: 5px; 
background-image: url(../assets/misc/green_yes.png); 
background-repeat: no-repeat; 
background-position: 0 .5em; 
border-bottom: 1px dotted #CCC; 
}

款式四个单独列出

<ul id="basic"> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
        <li>D</li> 
        <li>E</li> 
       </ul> 
<ul id="standard"> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
        <li>D</li> 
        <li>E</li> 
       </ul> 



<ul id="high"> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
        <li>D</li> 
        <li>E</li> 
       </ul> 



<ul id="premium"> 
        <li>A</li> 
        <li>B</li> 
        <li>C</li> 
        <li>D</li> 
        <li>E</li> 
       </ul>

的问题是，只有第一个列表中删除了图像取代了子弹。列表2-4包含了子弹旁边的图像。我怎样才能得到所有四个样式相同的列表？

来源

2012-05-03 Andy

将list-style-type:none添加到ul的CSS代码。

编辑： -adding代码

CSS：

#basic,#standard,#premium,#high,#basic li, #standard li, #premium li,#high li{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    vertical-align: baseline; 
} 
#basic,#standard,#premium,#high{ 
    list-style: none; 
}

来源

2012-05-03 19:17:07 Niranjan

这消除了子弹，但不像第一个列表它不断缩进，就像子弹还在那里。拳头列表也删除了缩进。 – Andy

重置整个ul，li。你有没有考虑过使用reset.css？这将解决您的所有后顾之忧[Here]（http://meyerweb.com/eric/tools/css/reset/）。对于你目前的问题，我会建议'margin：0;填充：0表示ul。 – Niranjan

@安迪。它现在工作吗？ :-) – Niranjan

尝试添加一个类到每个列表您的样式和添加该类的CSS而不是ID。

来源

2012-05-03 19:17:02

列表造型问题

回答

相关问题