php - 使用 data-tooltip 元素格式化 CSS

Question

我还在学习，请对我温柔一些。

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

我将如何格式化 css/php/html 代码，以便它们都包含在一行中。

如果我将 to 移到 img 之前，所有内容都会按需要排成一行——当您将鼠标悬停在标志上时，名称也会出现，这没关系，它也会生成两行。

 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 默认是 block 级元素，这意味着它们换行，所以你需要有 CSS 指示这些 div 与其旁边的图像内联。尝试这样做...

.top10_luchthaven {
    display: inline;
}

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