如何删除内联li元素的默认边距? [英] How to remove the default margin of inline li elements?

问题描述

我有以下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元素之间的边距.但这并不能消除边距

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

我如何将其删除

推荐答案

将所有li合并在一行中即可解决此问题.但是，如果您想了解更多消除这些空白的技术，则可以访问: http://davidwalsh.name/remove-whitespace-inline-block .

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.

它列出了这些技术:

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

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