Question

我有一张桌子，在第二栏中我想要一些文字，右边有一个图标，但图标总是包裹到下一行而不是显示在文本的右边。

（我想要

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

Answer 1

如果我正确理解了您的问题，那就是您正在寻找的内容：JSFiddle

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

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

这允许img与status span中的文字进行对接，但是将它们与文本分开并保持＃34;状态＆＃34;或＆＃34; B状态＆＃34;。

（科林几乎在下面，但在他的CSS中错过了span。）

Answer 2

在span标签中使用img图标，如下所示：

<span class="status">Some Text<img class="icon" width="16px" height="16px" src="img/completed.gif"></img></span>

Answer 3

那里有一个空的<span>正在推动图标图像。这：<span class"status"></span>将5px添加到图像的顶部。您可以完全摆脱这个空标记以使图像向上移动，或者添加此css来修复它： div.tableDiv div.statusLine span .status { padding: 0; display: inline;}

Answer 4

你的CSS中有填充图标，将图标移开，取出来。对于对齐，请添加line-height和vertical-align属性。

div.tableDiv { display:table; }
div.tableDiv div.statusLine { display:table-row; }
div.tableDiv div.statusLine span { 
    display:table-cell; 
    line-height:16px;
    vertical-align:middle;
} 
img.icon {
   border-style: none;
}

<强> JS Fiddle Demo

如果您想在文字和图标之间添加一些间距，可以在margin-left CSS中添加img.icon。

将<img/>标记齐平与表格中的文本对齐

4 个答案: