我如何删除li元素边距 [英] How do i remove li element margin

问题描述

我有以下html

 < ul> 
< li> one< / li> 
< li> two< / li> 
< li>三< / li> 
< / ul> 
  

和folliwing css

  li {
 display：inline-block; 
 padding：10px; 
 border：1px纯红色; 
保证金：0; 
} 
  

。

它列出了这些技术：

1。元素之间没有空间

 < ul>< li>项目内容< / li>< li>项目内容< li>< li>项目内容< / li>< / ul> 
  

2。字体大小：0在父

  .inline-block-list {/ * ul或ol与此类* / 
 font-size：0; 
} 
 
 .inline-block-list li {
 font-size：14px; / *将字体大小放回* / 
} 
  

3。 HTML评论

 < ul> 
< li>项目内容< / li><！ -  
  - >< li>项目内容< / li><！ -  
  - > < li>项目内容< / li> 
< / ul> 
  

4。负边距

  .inline-block-list li {
 margin-left：-4px; 
} 
  

5。下降关闭角度

 < ul> 
< li>< li>项目内容< / li 
>< li>< li>项目内容< / li> 
< / ul> 
  

I have following html

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

and folliwing css

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

DEMO

I am trying to remove the margin among the li elements by setting margin: 0;. But it doesn't remove the margin

How do i remove it

解决方案

Combining all lis in a single line solves the problem. But if you want to know more techniques to remove those margins you can visit : http://davidwalsh.name/remove-whitespace-inline-block.

It lists these techniques:

1. No Space Between Elements

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

2. font-size: 0 on Parent

.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 Comments

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

4. Negative Margin

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

5. Dropping Closing Angle

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

这篇关于我如何删除li元素边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！