HTML – 如何删除li元素边距

概述我有以下html <ul> <li>one</li> <li>two</li> <li>three</li></ul> 和css li { display: inline-block; padding: 10px; border: 1px solid red; margin: 0;} DEMO 我试图通过设置margin：0;来删除li元 我有以下HTML

<ul>    <li>one</li>    <li>two</li>    <li>three</li></ul>

和CSS

li {    display: inline-block;    padding: 10px;    border: 1px solID red;    margin: 0;}

DEMO

我试图通过设置margin：0;来删除li元素中的边距.但它并没有消除保证金

我该如何删除它

解决方法 将所有lis组合在一条线上可以解决问题.但是,如果您想了解更多可以访问这些边距的技术,请访问： http://davidwalsh.name/remove-whitespace-inline-block.

它列出了这些技术：

1.元素之间没有空间

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2.字体大小：父级为0

.inline-block-List { /* ul or ol with this class */Font-size: 0;}.inline-block-List li {Font-size: 14px; /* put the Font-size back */}

3. HTML评论

<ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li></ul>

4.负保证金

.inline-block-List li {margin-left: -4px;}

5.降低闭合角度

<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li></ul>

总结

以上是内存溢出为你收集整理的HTML – 如何删除li元素边距全部内容，希望文章能够帮你解决HTML – 如何删除li元素边距所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。