Question

我试图找出为什么当它是浮动父级的子级时，空的span标记将在新行上呈现。我确定这很明显，但我找不到答案。

编辑：这不是我想要解决的问题......更多的是研究问题，所以我并不是真的在寻找解决方法。

编辑：正如下面所指出的，这似乎特定于chrome

这是我的代码

HTML

<!-- Example 1  -->
<section>
  <div class = "parent">
    <span>contents</span>
    <span>contents</span>
  </div>
</section>

<!-- Example 2 -->
<section>
  <div class = "parent">
    <span>contents</span>
    <span>contents</span>
    <!-- empty span renders on new line -->
    <span class = "empty"></span> 
  </div>
</section>

CSS

.parent{
  float:right;
  background: #666;
  margin-bottom:10px;
}

.parent span {
  font-size: 40px;
  background: pink;
  margin-right: 10px;
}
section {
  clear:both;
}

请参阅CodePen http://codepen.io/anon/pen/ZYGWMR

Answer 1

margin-right:10px;似乎导致此行为，仅在Chrome中。

FF和IE都在线渲染跨度。

添加：

.empty { display:inline-block; }

似乎使Chrome的行为方式与FF和IE相同。

恕我直言，这似乎是Chrome中的一个错误。也许有人可以对此有所了解...... Chrome v.s FF / IE，哪一个是对的:-)？

Answer 2

Spans旨在嵌入或包装，即<p>标记。跨度将被视为段落。我想你可以添加span：inline block来让它们呈现内嵌

为什么浮动父级中的空span标记会在新行上呈现？

2 个答案: