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

PeeWee2201

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

(我想

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类继承table-cell了先前CSS的样式。您需要.status像这样明确声明样式

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

这样可以使img抵靠中的文本status span,但同时将它们与文本“ A状态”或“ B状态”分开。

(Colin在下面几乎拥有它,但是span在他的CSS中错过了它。)

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将标签中的文本对齐到右侧?

来自分类Dev

将图像从img标签的src上传到php

来自分类Dev

jQuery将每个img标签移动到每个a元素中

来自分类Dev

如何将xpath的值放入html img标签

来自分类Dev

如何将<a> <img> </a>标签与div对齐

来自分类Dev

在选项文本中添加html img标签

来自分类Dev

将表格代码文本与图像对齐

来自分类Dev

如何将img放在svg标签前面

来自分类Dev

如何将内联img href与其中的文本标签对齐?

来自分类Dev

在一行中对齐hr标签和img标签

来自分类Dev

无法将img标签附加到ap标签

来自分类Dev

将CSS应用于嵌入img标签的SVG图像

来自分类Dev

将<img>元素包装在<div>中,但允许使用<a>标签

来自分类Dev

将浮动文本水平对齐到居中img的两侧

来自分类Dev

将img和ul列表对齐

来自分类Dev

如何将img标签垂直放置在图片标签内?

来自分类Dev

将具有z-index与跨度的多个img对齐

来自分类Dev

使用形状外包装时,如何将img与文本底部对齐

来自分类Dev

将Bootstrap标签与列表中的文本对齐

来自分类Dev

将IMG右对齐到DIV元素内的边缘

来自分类Dev

如何使用Ajax将图像链接放在img标签中

来自分类Dev

将Canvas插入img标签

来自分类Dev

无法将img标签附加到ap标签

来自分类Dev

CSS:将IMG标签放置在div中且溢出

来自分类Dev

将Img标签与每个图像下方的p标签并排对齐-CSS

来自分类Dev

将<img>元素包装在<div>中,但允许使用<a>标签

来自分类Dev

如何使用js将<svg>标签更改为<img>标签?

来自分类Dev

将img中的img在div中垂直居中

来自分类Dev

将多个<img>与float对齐