使用data-tooltip元素格式化CSS

Question

我还在学习，请和我一起温柔。

当我运行我的脚本时，除了使用我的css完全格式化之外，一切正常。在剪切代码中，我想要。但是，当我在中间有div时，如下所示，当我运行页面时，我有两行信息。第一行包含标志图像，第二行包含我输出的“luchthavencode”，根据需要加下划线。

如何格式化css / php / html代码，使它们全部包含在一行中。

如果我在img之前移动到，那么所有内容都按照需要排成一行 - 当你将鼠标悬停在标志上时，名称也会出现，也可以生成两行。 < / p>

 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样式

 .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;

使用全表php / html代码：

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是块级元素，这意味着它们会换行，因此您需要使用CSS来指示这些div与其旁边的图像内联。试着这样做......

.top10_luchthaven {
    display: inline;
}

如果这不起作用，请改为display: inline-block。