跨度为什么会影响同级跨度的垂直位置

在下面的HTML页面中，我有一个div，其中包含两个跨度（span1和span2），其中第二个包含子跨度span2a。 span1包含文本，span2a也一样。通过这种设置，文本的垂直对齐不同，我不能解决原因。跨度为什么会影响同级跨度的垂直位置

使事情复杂化，span2和span2a上有风格属性。我无法控制这些，因为它们是在jQuery循环插件的运行时注入的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Test</title> 
    <style type="text/css"> 
     body {margin: 0; padding: 0; font-family: arial; color: black;} 
     .container { height: 30px; text-align: left; padding: 8px 15px 0 15px; background-color: #fee; border: 1px solid red;} 
     .ticker { font-size: 12px; font-weight: bold; padding-top: 4px; float: left;} 
     .ticker > span:first-child { background-color: #bfb; } 
     .tickerscroll { display: inline-block; background-color: #bbf; } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; overflow-x: hidden; overflow-y: hidden; "> 
       <span class="span2a" style="position: absolute; top: 0px; opacity: 1; z-index: 3; left: 0px; ">The value (in a sub-span; note that Label is lower then this text)</span> 
      </span> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "> 
       &nbsp;<span class="span2a" style="position: absolute; top: 0px; left: 0px; ">The value (this time, I've added a &amp;nbsp; outside this inner span)</span> 
      </span> 
     </div> 
    </div> 
    <div class="container"> 
     <div class="ticker"> 
      <span class="span1">LABEL: </span> 
      <span class="span2 tickerscroll" style="position: relative; width: 480px; height: 15px; "> 
       The value (this time, the inner span span2a is not present at all) 
      </span> 
     </div> 
    </div> 
</body> 
</html>

正如你可以从我的代码中看到的，我已经添加了两个变体“修复”的问题：

添加一些文字（任何文字，在我来说，我已经添加了一个非span2a以外的span2内。
完全删除子跨度，并将文本放在第二个顶级跨度内。但是，这不是我的选择，因为需要使用span2a来使jQuery循环工作。

有没有办法让两段文字对齐而不必人为抛出一个& nbsp;变成span2？该解决方案无法更改任何span元素的样式属性，但可以根据需要添加CSS类。

来源

2012-04-02 Richard Fawcett

垂直对齐是不同的，因为span标签是自然内联元素，在您的情况下，您正在修改span2类的行为，方法是使用overflow:hidden属性创建块级元素。

.span1 { 
    display: inline-block; 
    *display:inline; /* ie 7 fix */ 
    vertical-align: top; 
}

或者

.span1 { 
    float:left; 
}

来源

2012-04-02 15:56:17

非常感谢！我尝试了很多东西，我很惊讶，我还没有尝试过。有趣的是，你的解决方案似乎没有IE7修复工作，至少在运行IE7兼容模式的IE8中......。 – 2012-04-03 08:44:09

这一直是我的许多问题的原因。我很高兴终于找到了解决方案！谢谢！ – 2013-02-05 05:05:34

：您可以通过还定义你 span1类与 display:inline-block块级元素，只需将其对准与 vertical-align:top财产上或将其浮动到左边修复

我想试试这个：

让所有这3个跨度具有相同的行高和同一垂直对齐

实施例：

.span1, .span2, .span2a 
{ 
    line-height: 20px; 
    vertical-align: middle; 
}

来源

2012-04-02 16:00:37 Zwik

感谢您的企图@Zwik。但是，这实际上反转了问题，并且标签现在高于值！ vertical-align：top做了诀窍，所以我猜测line height指令被忽略了？ – 2012-04-03 08:45:16

其实不，这是考虑到的。我发布的代码只是一个例子，以显示我所解释的内容;）。最后，如果使用vert align top，则文字下方会有一些未使用的空间，除非字体大小足够大。 – Zwik 2012-04-04 14:00:44

.ticker span {vertical-align:top}

为了回答您的问题：跨度2是空的，因此没有什么可与跨度对齐1. 跨度2是绝对定位跨度2a的包含块，并且该图2a从顶部开始：0;左边：跨度2的0，因此不对齐。

第二种情况：如果跨度2不是空的，它将与跨度1基线对齐，并且a.p.量程2a如预期一致。

情况3与情况2一样。

来源

2012-04-02 18:25:35 ichao

对于有效的解决方案+1。但是，我将接受的答案提供给@Andres Ilich，他首先提供了一个工作解决方案。虽然谢谢！ – 2012-04-03 08:42:25

此外，您已经给出了基线对齐的一个很好的解释，再次感谢。 – 2012-04-03 08:50:47

跨度为什么会影响同级跨度的垂直位置

回答

相关问题