Question

我希望在这些跨度中显示图像下方的文字，并且跨度不会跳到新行：

<span class="smileycode" id=":sm:">
    <img src="images/smiley/sm.png">:sm:
</span>&nbsp;
<span class="smileycode" id=":sq:">
    <img src="images/smiley/sq.png">:sq:
</span>&nbsp;

任何建议？

Answer 1

DEMO

enter image description here

.smileycode{
  display:inline-block;
}
.smileycode img{
  display:block;
}

Answer 2

将此添加到您的班级。

.smileycode
{
display:block;
}

这会将你的范围转换为块级元素，并使它们跳转到下一行。

希望这就是你要找的东西。

修改

如果您想确保文字在图片下方显示为标题，则可以使用display:table-caption;来实现此目的。

以下是一个工作示例。

<强> DEMO

CSS：

.smileycode{display:table-caption;}

希望这有帮助。

Answer 3

您可以尝试使用此代码。如你所见，我已经制作了一张没有边框的桌子，可以根据需要显示图像。

<table id="yourid" border="0">
 <tr>
    <td width="50%">
        <span class="smileycode" id=":sm:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
        </td>
    <td width="50%"><span class="smileycode" id=":sq:"><img src="http://i.imgur.com/ngS6rsb.png"></span>
        </td>
  </tr>
  <tr>
    <td width="50%">
        :sm:
    </td>
    <td width="50%">:sq:
    </td>
  </tr>

工作示例：fiddle

Answer 4

您可以解决此问题的另一种方式...利用:after和自定义属性。

HTML w / custom attrs

<span class="smileycode" id=":sm:" data-text=":sm:">
    <img src="http://placehold.it/50x50">
    </span>
<span class="smileycode" id=":sq:" data-text=":sq:">
    <img src="http://placehold.it/50x50">
        <span class="smileycode" id=":sm:" data-text=":sm:">
    <img src="http://placehold.it/50x50">
    </span>
<span class="smileycode" id=":sq:" data-text=":sq:">
    <img src="http://placehold.it/50x50">
        <span class="smileycode" id=":sm:" data-text=":sm:">
    <img src="http://placehold.it/50x50">
    </span>
<span class="smileycode" id=":sq:" data-text=":sq:">
    <img src="http://placehold.it/50x50">
</span>

CSS w / pseudo-elements

.smileycode {
    position: relative;
}
.smileycode:after {
    position: absolute;
    content: attr(data-text);
    top: 1em;
    left: 0;
    z-index: 1;
}

<强> DEMO

Answer 5

这并不困难。有效使用<pre> / <br>然后display style将为您提供帮助。请参阅以下代码：

HTML：

    <body>

  <span class="smileycode" style="display:inline-table" id=":sm:">
    <img src="images/smiley/sm.png"><pre>:sm:</pre>
</span>&nbsp;

<span class="smileycode" style="display:inline-table" id=":sq:">
  <img src="images/smiley/sq.png"><pre>:sq:</pre>
</span>&nbsp;

</body>

请在此处查看有效的解决方案：http://jsbin.com/AHiYuPO/2/edit。请记住run with js。

Answer 6

http://jsfiddle.net/hcDne/

<div class="smileycode" id=":sm:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sm:</div>&nbsp;<div class="smileycode" id=":sq:"><img src="http://www.zeropages.com/smileys/sm_2828a.gif">:sq:</div>

.smileycode{
    width:30px;
    text-align:center;
    float:left;
}

Answer 7

我在这里看到了一些基于table的方法。由于我更像是一个没有桌子的人，我使用float: left提供左堆叠解决方案。

您必须将现有范围换成另一个将其浮动到左侧的范围。

<span class="pull-left"><span class="smileycode" id=":sm:">
    <img src="http://placehold.it/50x50/dddddd/ffffff">:sm:
    </span></span>&nbsp;
<span class="pull-left"><span class="smileycode" id=":sq:">
    <img src="http://placehold.it/50x50/dddddd/ffffff">:sq:
    </span></span>&nbsp;

CSS：

span.smileycode img {
    display: block;
}
.pull-left {
    float: left;
    margin-right: 5px;
}

工作小提琴：http://jsfiddle.net/bND5Z/

Answer 8

.smileycode {
    float: left;
    margin-right: 10px;
}

.smileycode img {
    display: block;
}

jsfiddle

Answer 9

根据您提供给我的image，这是一个完整的解决方案。

标记：

<div class="smileycode" id=":sm:">
    <span>:sm:</span>
    <img src="http://www.zeropages.com/smileys/sm_2828a.gif" />
</div>
<div class="smileycode" id=":sq:">
    <span>:sq:</span>
    <img src="http://www.zeropages.com/smileys/sm_2828a.gif" />
</div>

CSS：

.smileycode { clear:both; padding:5px; }
.smileycode span { float:left; padding:3px 0px 0 0; width:30px; }
.smileycode img { float:left; }

jsfiddle

Answer 10

正如@Roko所说，但为了与旧IE的兼容性添加了一个hack css：

 .smileycode {
   display:inline-block;
   *display: inline;
 }

我还要添加一个

 text-align:center;
 line-height:1.2em;

你的跨度。但它只是设计细节:)正如其他人可以在他们的例子中添加的那样！

您也可以清除所有  HTML代码（如果可以的话）

css - 在一个范围内对齐图像下方的文本

10 个答案: