html - 图片文字在同一行

Question

我一直在尝试在文本旁边显示图像。我想在与成本相同的行中显示 resources/rupee.png 图像，但成本出现在图像的底部。 这是我的 PHP 代码:

...
    $display_query = mysql_query("SELECT * FROM eportal");

                        echo "<table id='pageTable'><thead><tr><th>Item code</th><th>Image</th><th>Description</th><th>Cost</th></tr></thead>";
                        echo "<tbody>";
                        while($row = mysql_fetch_array($display_query)){
                            echo "<tr><td>".$row['itemid']."</td><td>";
                            echo '<img src="resources/wh/'.$row['itemid'].'.png" title="'.$row['itemid'].'"/>';
                            echo "</td><td>".$row['description']."</td><td><span>";
                            echo '<img src="resources/rupee.png" />';
                            echo '</span><span class="cost">'.$row['cost'].'</span></td></tr>';
                        }
                        echo "</tbody>";
                        echo "</table>";
...

和相关的 CSS:(我可能已经弄乱了我的 CSS 代码很长时间以来一直在尝试这样做)

#pageTable span{
    float:left
}
#pageTable .cost{
    float:left;
}
#pageTable span img{
    padding:3px 0 0 0;
    display : inline !important;
}

Answer 1

虽然这可能不会直接回答您的特定查询，但我认为您不应该尝试以这种方式完成任务(如果您仍然希望在当前标记中使用“img”元素，其他一些建议的解决方案应该可以正常工作)。

如果我正在创建此应用程序，我会使用相关的 Unicode 符号来表示货币 (http://en.wikipedia.org/wiki/Indian_rupee_sign)，或者我会只使用文本(“印度卢比”或其他)。如果您确实想要使用特殊的图像符号，我倾向于劝阻您不要在每笔金额前使用“img”，因为这会造成大量重复，而且在我看来不是很干净的。一个不错的解决方案可能是在某些自定义类上使用一些 CSS 伪元素:

HTML:

​<span class="currency rupee">500</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS:

.currency:before {
    vertical-align:-2px;
    margin-right:5px;
    width: 16px;
    height: 16px;
}
.rupee:before {
    content: url(resources/rupee.png); /* Little 16x16 currency symbol */
}