html - 我如何放置标签和标签内联？

Question

请参阅图像的右侧。

在表中的 Tonage Bytes 下，我希望这个进度条与数据并排（内联），即与 929.3 一起。

作为参考，请参阅此图像。我想要完全相同的布局。

目前，他们都处于不同的行列。那么我怎样才能内联调整它们。

<tr>
    <td>Arts and Entertainment</td>
    <td>1</td>
    <td>1.03</td>
    <td>929.3
        <div class="progress">
            <div class="bar" style="width: 60%; height = 20px"></div>
        </div>
    </td>
</tr>  

Answer 1

我假设，您只需要分配以下 CSS：

.progress {
  display: inline-block;
  width: 100px;
}

display: inline-block但是，一些较旧的浏览器不支持（参见 MDN，例如）。

示例小提琴

Answer 2

您可以尝试使用<span>而不是<div>. 默认情况下，<span>是内联的。或者，您可以设置 css 选项display: inline;或display: inline-block;在您的style属性中