css 不变,仅改动 html 内部文本节点,display:inline 出现了奇怪的空隙

Fractal
  • 3.9k

CSS 部分

.menu {}
.menu .row {margin:0;padding:0;list-style:none;}
.menu .item {position:relative;margin:0;padding:0 0.5em;cursor:default;color:#000;box-sizing:border-box;}
.menu .item:hover {color:#FFF;background-color:#666;}
.menu .row > .item {display:inline;border:1px solid #000;box-sizing:border-box;}

html 部分

<div class="menu">
    <ul class="row">
        <li class="item">
            File
        </li>
        <li class="item">
            Edit
        </li>
        <li class="item">
            View
        </li>
        <li class="item">
            Help
        </li>
    </ul>
</div>

li 元素内部文本节点有换行时,如图
图片描述

<div class="menu">
    <ul class="row">
        <li class="item">File</li>
        <li class="item">Edit</li>
        <li class="item">View</li>
        <li class="item">Help</li>
    </ul>
</div>

li 元素 html不换行时,如图
图片描述

这里用的是 display:inline,不是 display:inline-block 空隙问题

去除所有 空格/换行 可以解决问题

我想知道的是:为什么 li 内部最后增加了 空白/换行,原来的外部 空白/换行 引起空隙消失了

回复
阅读 1.5k
4 个回答
✓ 已被采纳

补充其他情况

<div class="menu">
    <ul class="row">
        <li class="item">File </li>
        <li class="item">Edit </li>
        <li class="item">View </li>
        <li class="item">Help </li>
    </ul>
</div>

文本后面增加一个空格,没有空隙
图片描述

<div class="menu">
    <ul class="row">
        <li class="item"> File</li>
        <li class="item"> Edit</li>
        <li class="item"> View</li>
        <li class="item"> Help</li>
    </ul>
</div>

文本前面增加一个空格,空隙还在
图片描述


图片描述
看起来是 元素内部的 空白/换行 合并了 元素外部的 空白/换行


行内空白合并不受元素限制

<div style="border:1px solid red;">
    <span style="box-shadow:0 0 0 1px #000 inset;">A </span><span style="box-shadow:0 0 0 1px #000 inset;"> B</span>
</div>

图片描述


知道原因后,可以这样解决问题

<style type="text/css">
.menu {}
.menu .row {margin:0;padding:0;list-style:none;}
.menu .item {position:relative;margin:0;padding:0 0.5em;cursor:default;color:#000;box-sizing:border-box;}
.menu .item:hover {color:#FFF;background-color:#666;}
.menu .row > .item {display:inline;border:1px solid #000;box-sizing:border-box;}
/* css 多加这一行 */
.menu .item:after {content:' ';display:inline;}
</style>
<div class="menu">
    <ul class="row">
        <li class="item">File</li>
        <li class="item">Edit</li>
        <li class="item">View</li>
        <li class="item">Help</li>
    </ul>
</div>

图片描述

最外层div设置font-size:0px

外层设置font-size:0px;
或者把li写在一行,类似

<ul class="row">
        <li class="item"> File</li><li class="item"> Edit</li>....
</ul>

空白字符压缩(white space collapse)是西文排版的必然结果。SGML、TeX都是如此。不过对于不使用空格作为词分界的语言,比如东亚语言来说,就造成了问题。解决办法有:

      一.
        ul{ white-space-collapse:discard; }
        li{ display: inline-block;}
      二.
      父元素设font-size:0,子元素重新设大小;      
      三.
      删除 HTML 文件中 inline-block 元素之间的空格和空行。
你知道吗?

宣传栏