无法使用图标从UL列表中删除项目符号

时间:2013-04-04 11:27:22

标签: css list icons html-lists

我在这里有一个带有图标的列表:

http://punky-monkey.co.uk/chalet6/our-chalet/

<ul class="keyfeatures">
    <li id="sleeps14">Sleeps 14</li>
    <li id="hottub">Outdoor Hot Tub</li>
    <li id="fire">Log Fire</li>
    <li id="terrace">South Facing Terrace</li>
    <li id="outdoorterrace">Outdoor Terrace</li>
    <li id="coffee">Bean to Cup Coffee Machine</li>
    <li id="wine">Honesty Bar</li>
    <li id="tv">Freeview TV</li>
    <li id="games">Games Console</li>
    <li id="ipod">iPod Dock</li>
    <li id="wifi">Free Wi-Fi</li>
</ul>

CSS

.keyfeatures li {list-style-type:none; vertical-align:top; margin-left:30px; list-style:none;}

ul #sleeps14 { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/bed.png'); }
ul #hottub { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/hottub.png'); }
ul #fire { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/fire.png'); }
ul #terrace { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/sun.png'); }
ul #outdoorterrace { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/lounger.png'); }
ul #coffee { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/beans.png'); }
ul #wine { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/wine.png'); }
ul #tv { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/tv.png'); }
ul #games { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/games.png'); }
ul #ipod { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/ipod.png'); }
ul #wifi { list-style-image: url('http://punky-monkey.co.uk/chalet6/wp-content/uploads/2013/04/wifiicon2020.png'); }

我想从列表中删除子弹点并且只有图标,我已经尝试过将list-style-type:none放在任何地方 - 有些东西会覆盖它。

有人可以帮忙吗?谢谢,沃伦

2 个答案:

答案 0 :(得分:1)

删除CSS内联ul li:after声明。这些都是在styles.css中隐藏样式。

ul li:after {
    border-left: 3px solid #FE6500 !important;
}

答案 1 :(得分:1)

它被以下CSS覆盖

ul li:after
{
    border-left: solid 3px #fe6500 !important;      
}

如果您需要该功能,请仅适用于特定列表。