> css教程 > css >

CSS list-style 设置无效的解决办法

来源:网络 文章列表 2019-04-22 8
ul的list-style无效的解决办法。

问题描述:

通过设置ul的list-style:square属性不生效。

<style type="text/css">
 *{padding: 0; margin: 0;}
 ul{ list-style: none;  }
 ul.one{ list-style: square; }
 ul.two{ list-style: circle; }
</style>
<ul class="one">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="two">
 <li>aaaa</li>
 <li>bbbb</li>
 <li>cccc</li>
</ul>

可以看到,我们虽然设置了ul.one{ list-style: square; } ul.two{ list-style: circle; } 但是没有list-style的效果出来

 

出现这个问题的原因:

通常我们都会有一个css-reset初始化所有html的margin:0; padding:0;的公共样式文件。当margin:0;或者padding:0;时,如果我们没有设置list-style-position为inside的时候就会出现这种情况。

解决办法

<style type="text/css">
 *{padding: 0; margin: 0;}
 ul{ list-style: none;  }
 ul.one{ list-style: square inside; }
 ul.two{ list-style: circle; margin: 30px; }
</style>
<ul class="one">
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

<ul class="two">
 <li>aaaa</li>
 <li>bbbb</li>
 <li>cccc</li>
</ul>

设置 list-style: square inside。或者给 ul 增加margin或者padding的left边距。

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论