將文字和圖像分組在一起

Question

我感覺像這樣應該很簡單。但我沒有太多的運氣。

我正在創建一個帶有表格的網站。該表的標題中包含用於描述列和圖像的文本。有關更多信息，用戶可以將鼠標懸停在圖片上。

但是我所看到的情況是文字和圖像不一致。相反，圖像會換行。即對於薄柱。

我想防止發生這種情況。到目前爲止，我得到的唯一成功是在表頭中使用另一個表。這似乎很荒謬。

我該如何做到這一點？

我的一些嘗試的HTML。

<table class="inline"> 
    <tr> 
     <th>TextA <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
     <th><table><tr><td>TextB</td> <td><img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></td></tr></table></th> 
     <th><span style="display: inline-block;">TextC <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></span></th> 
     <th>TextD <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
     <th>TextE <img class="info" src="/images/info.png" onmouseover="ShowInfo()"/></th> 
    </tr> 
    </table> 

我的樣式表

.info { 
    width: 16px; 
    height: 16px; 
    float: right; 
} 

.inline { 
    white-space: nowrap; 
    /*overflow: hidden;*/ 
    /*display: inline-block; 
    table-layout:fixed;*/ 
} 

Answer 1

圖像和文字都默認內聯元素。如果他們沒有足夠的空間，他們會換到下一行。修正了設置：

th { 
    white-space: nowrap; 
} 

這力量讓所有的內聯元素（包括display: inline和display: inline-block）在同一行，推動th的界限，使之變得更寬。

此外，你永遠不應該使用表來實現一定的佈局。表格將包含表格數據。 CSS被髮明來處理樣式。