我有一个表格,在第二列中,我想有一些文本,其右边立即有一个图标,但是该图标总是环绕在下一行,而不是出现在文本的右边。
(我想
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
span
与您一起使用的status
类继承table-cell
了先前CSS的样式。您需要.status
像这样明确声明样式:
div.tableDiv div.statusLine span span.status { display: inline;}
这样可以使img
抵靠中的文本status
span
,但同时将它们与文本“ A状态”或“ B状态”分开。
(Colin在下面几乎拥有它,但是span
在他的CSS中错过了它。)
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句