Question

我有UL LI，display:inline-block将使用float水平显示。然而，当我要求它们完全齐平以用于测量目的时，它们将所有空格（包括换行符和制表符）折叠到元素之间的单个空间;我不希望我的测量结果被字体中不同大小的空格所抛弃。

有没有办法从这些之间删除空格？ 我需要在不控制HTML的情况下完成这项工作;这将是一个小概念验证框架，表明它可以在不滥用<ul> <li>Semantic Cell 1</li> <li>Semantic Cell 2</li> <li>Semantic Cell 3</li> <li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li> </ul> <style> ul>li{ background: gray; display: inline-block; } </style>

的情况下制作

SSCCE：http://jsfiddle.net/nSsTP/

{{1}}

Answer 1

您可以再使用一个样式标记

ul    
    {      
    font-size: 0;
}

OR

ul>li
    {
         display: inline-block;    
        background: gray;
        float:left;
}

希望这会有所帮助。

Answer 2

inline-block会在元素之间留下空白区域。

要删除此空格，请在同一行上写入元素。

更改

<ul>
    <li>Semantic Cell 1</li>
    <li>Semantic Cell 2</li>
    <li>Semantic Cell 3</li>
    <li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

到

<ul>
    <li>Semantic Cell 1</li><li>Semantic Cell 2</li><li>Semantic Cell 3</li><li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

Demo here.

OR：

纯css解决方案：

ul{font-size:0;}
li{font-size:1rem;}

Demo here.

Answer 3

我正在尝试你的代码。如果您将所有列表项

逐个放入而不点击输入，则可以删除空白区域。

<ul>
    <li>Semantic Cell 1</li><li>Semantic Cell 2</li><li>Semantic Cell 3</li><li>Pretty Cell 4</li><li>Pretty Cell 5</li><li>Pretty Cell 6</li>
</ul>

如果不能正常工作，请告诉我。

Answer 4

您可以将其显示为inline-block元素而不是block，而是使用float: left：

ul>li{
    background: gray;
    display: block;
    float: left;
}

Demo

如何删除HTML元素之间的折叠空格？

4 个答案: