html – 如何删除内联块元素源代码中换行符创建的不可见边距

发布时间：2020-12-14 18:27:03 所属栏目：资源来源：网络整理

导读：我有一个 a元素作为具有固定宽度的内联块.我想展示 a盒子彼此相邻,每排两盒(与 first example完全一样).但是,如果每个框元素都在源代码( second example)中的新行中,那么这些框会获得一个不可见的边距,如果你看一下这个例子,你可以看到它. Chrome开发工具.父

我有一个< a>元素作为具有固定宽度的内联块.我想展示< a>盒子彼此相邻,每排两盒(与 first example完全一样).但是,如果每个框元素都在源代码( second example)中的新行中,那么这些框会获得一个不可见的边距,如果你看一下这个例子,你可以看到它. Chrome开发工具.父包装的宽度和填充以及每个框的边距都是精确计算的,因此添加的不可见边距将第二个框向下推入下一行.

我可以使用第一个示例的代码(所有元素没有直接在彼此后面的换行符),但我想知道如何删除这个不可见的边距,以便两个框在包装器中再次彼此相邻div(如第一个例子中所示),即使每个< a>元素在源代码中的新行中.

例子：

1.)代码中没有换行符(我想要的布局)：http://jsfiddle.net/mLa93/2/

2.)使用代码换行(在< a>元素更改布局后添加换行符)：http://jsfiddle.net/mLa93/3/

解决方法

由于fcalderan建议使用white-space：nowrap应该可以工作.有关示例,请参见 http://jsfiddle.net/kkpKg/.如果没有,那么你必须做一些不同或错误的事情.

好的,现在我明白了:-)

最好的解决方案是省略换行符,但是如果你不想这样做,那么下一个最好的方法是将它们评论出来：

<div id="wrap">
       <a href="#">box 1</a><!--
    --><a href="#">box 2</a><!--
    --><a href="#">box 3</a>
  </div>

如果不是这种可能性,我能想到的唯一一件事(当前浏览器支持)是将#wrap中的行高字体大小设置为零,并在链接中将其设置回原始大小：

#wrap {
  font-size: 0;
}
#wrap a {
  font-size: 14px;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!