跨度爲什麼會影響同級跨度的垂直位置

在下面的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

跨度爲什麼會影響同級跨度的垂直位置

回答

相關問題