html - 将<img>标签与表格中的文本对齐

我有一个表格，在第二列中，我想有一些文本，其右边立即有一个图标，但是该图标总是环绕在下一行，而不是出现在文本的右边。

（我想要

some text [icon]

在第二栏中，但我得到

some text
[icon]

代替。）

这是我到目前为止的内容：

的HTML

<div class="tableDiv">
<div class="statusLine">
    <span class="statusHeader">A status</span>
    <span>
       <span class="status">some text</span>
       <img class="icon" width="16px" height="16px" src="img/completed.gif"></img>
   </span>
</div>
<div class="statusLine">
    <span class="statusHeader">B status</span>
    <span>
       <span class="status">other text</span>
       <img class="icon" width="16px" height="16px" src="img/ongoing.gif"></img>
   </span>
</div>
</div>

的CSS

.tableDiv{
    display:table;
}
.tableDiv .statusLine{
    display:table-row;
}
.tableDiv .statusLine span{
    display:table-cell;
    padding:5px;
    width: 200px;
}
.icon {
   border-style: none;
}

这应该很容易，但是我想念的是什么？

JSFiddle

最佳答案

如果我正确理解您的问题，这就是您要查找的内容：JSFiddle

您具有span类的status继承了先前CSS的table-cell样式。您需要显式声明.status的样式，如下所示：

div.tableDiv div.statusLine span span.status { display: inline;}

这允许img与status span中的文本对接，但使它们都与文本“ A状态”或“ B状态”分开。

（Colin在下面几乎拥有它，但是在他的CSS中错过了span。）

关于html - 将<img>标签与表格中的文本对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25515413/