Question

请参阅image的右侧。

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

供参考，请参阅此image。我想要完全相同的布局。

目前他们都在不同的行。那我怎么能在线调整它们呢。

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

但是，某些旧版浏览器（see MDN, e.g.）不支持

display: inline-block。

Example Fiddle

Answer 2

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

如何将标记和<div>标记内联？</div>

2 个答案: