6

我想在这些跨度中显示图像下方的文本，并且跨度不跳转到新行：

<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;

有什么建议吗？

4

10 回答 10

6

演示

在此处输入图像描述

.smileycode{
  display:inline-block;
}
.smileycode img{
  display:block;
}
于 2013-09-11T13:22:25.487 回答
3

将此添加到您的课程中。

.smileycode
{
display:block;
}

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

希望这是您正在寻找的。

编辑

如果您想确保文本看起来像图片下方的标题，您可以使用display:table-caption;来实现此目的。

下面是一个工作示例。

演示

CSS：

.smileycode{display:table-caption;}

希望这可以帮助。

于 2013-09-11T13:12:21.847 回答
2

你可以试试这段代码。如您所见，我制作了一个没有边框的表格，可以根据需要显示图像。

<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>

工作示例：小提琴

于 2013-09-11T13:11:57.910 回答
1

只是另一种解决这个问题的方法......利用:after和自定义属性。

带有自定义属性的 HTML

<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

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

演示

于 2013-09-11T13:23:38.133 回答
0

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

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

另外我会添加一个

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

到你的跨度。但这只是设计细节:) 因为其他人可以在他们的例子中添加！

你也可以清理你所有&nbsp;的 HTML 代码（如果可以的话）

于 2013-09-11T13:30:41.553 回答
0

这并不难。有效使用<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。

于 2013-09-11T13:15:34.273 回答
0

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;
}
于 2013-09-11T13:17:13.760 回答
0

我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/

于 2013-09-11T13:17:31.853 回答
0 
.smileycode {
    float: left;
    margin-right: 10px;
}

.smileycode img {
    display: block;
}

jsfiddle

于 2013-09-11T13:19:03.583 回答
0

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

标记：

<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

于 2013-09-11T13:23:59.677 回答