データツールチップ要素でCSSをフォーマットする

Question

私はまだ学んでいます。私とやさしく行きましょう。

私のスクリプトを実行すると、CSSを使った完全な書式を除いてすべてが機能します。コードのカットでは、私はしたいです。しかし、中にdivがあると、以下のようにページを実行すると2行の情報が表示されます。 1行目にフラグイメージが格納され、2行目に出力された「luchthavencode」が含まれ、必要に応じて下線が引かれます。

どのようにして1行にすべて含まれるように、css/php/htmlコードをフォーマットしますか？

imgの前にtoを移動すると、すべてが必要に応じて行に表示されます。フラグにカーソルを合わせると名前も表示されます）、2行も生成されます。

echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'>&nbsp;&nbsp;<div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>"; 

次のCSSスタイルの完全なテーブルPHP/HTMLコードと

.top10_luchthaven { 
    position: relative; 
    border-bottom: .1em dotted; 
    width:30px; 

} 

.top10_luchthaven:hover:after { 
    background: url(http://globe-trekking.com/vg/img/hovercard-bg.png) repeat-x; 
    border-radius: 5px; 
    bottom: 5px; 
    color: #fff; 
    content: attr(data-tooltip); 
    left: 20%; 
    padding: 5px 15px; 
    position: absolute; 
    z-index: 98; 
    width: 400px; 
} 

.top10_luchthaven:hover:before { 
    border: solid; 
    border-color: #333 transparent; 
    border-width: 6px 6px 0 6px; 
    bottom: 20px; 
    content: ""; 
    left: 50%; 
    position: absolute; 
    z-index: 99; 

使用：

echo "<table width='200px' border='0' cellpadding='2' cellspacing='2'>"; 
echo "<tbody>"; 
echo "<tr>"; 
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>#</strong>"; 
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>Luchthaven</strong>"; 
echo "<td bgcolor='#0033FF'><strong class='home_box_header'>No.</strong>"; 
echo "</tr>"; 

$line = 1; 

while($row = mysqli_fetch_assoc($result)) { 

    echo "<tr>"; 
    echo "<td bgcolor='#C6DEFF'>$line</td>"; 
    echo "<td width='100px' bgcolor='#C6DEFF'><img src='http://globe-trekking.com/vg/img/flags/".$row['countryflag']."'>&nbsp;&nbsp;<div class='top10_luchthaven' data-tooltip=\"".htmlspecialchars($row['luchthavennaam'])."\" >".$row['luchthavencode']."</div></td>"; 
    echo "<td width='60px' bgcolor='#C6DEFF'>".$row['sum']."</td>"; 
    echo "</tr>"; 

    $line++; 
} 

echo "</tbody>"; 
echo "</table>";  

Answer 1

問題はdivsを意味する、デフォルトではブロックレベル要素であるということです彼らは改行をするので、そのdivの隣にあるイメージとインラインになるように指示するCSSが必要です。これを試してみてください...

.top10_luchthaven { 
    display: inline; 
} 

これが機能しない場合は、代わりにdisplay: inline-blockを実行してください。