将 <span> 个元素放在同一行文本中

Question

我认为这应该是直截了当的，我已经阅读了一些其他问题，但 none 的解决方案有效。

我正在修改用于在 eBay 上使用的产品列表的邮件列表模板 - 所以它充满了 table-单元格，虽然不理想但在一定程度上起作用，但似乎导致一个问题。

我有一个带有一些 javascript 的标签系统，可以在您将鼠标悬停在上面时显示弹出信息，这很好用，但是用于对齐跨度文本的 CSS 会为每个跨度创建一个新行当我希望一切都内联时的元素。

如图所示，每个粗体元素都以换行符开头。我已经删除了位于内部的弹出式跨度 class 以排除这种情况，但它们仍然没有排在一起，这里是跨度标签 CSS

.tiptext {
float:left;
width: auto;
display:inline-block;
font-family: 'proxima_nova_rgbold', Helvetica; 
text-decoration: underline;
color: rgb(39, 44, 45); 
font-size: 14px;
cursor: help; 
}

这是跨度元素所在的 HTML

<tr>
                                        <td valign="top" width="100%" class="icons61">

                                            <table width="61" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                                                <tr>
                                                    <td width="100%" height="30" class="fullCenter" >
                                                        <a href="#" style="text-decoration: none;"><img src="http://deecies.com/mac/icon-tutorial.png" width="61" height="auto" alt="" border="0"  class="hover" style="vertical-align: top;"></a>
                                                    </td>
                                                </tr>
                                            </table>

                                            <table width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                                                <tr>
                                                    <td width="100%" height="20">
                                                    </td>
                                                </tr>
                                            </table>

                                            <table width="195" border="0" cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="full">
                                                <tr>
                                                <td width="100%" height="30" style="text-align: left; font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(239, 73, 53); line-height: 24px; font-weight: normal;" class="fullCenter">
                                                    <p  cu-identify="element_05873407123144716"><span style="color: rgb(239, 73, 53); font-family: proxima_novasemibold, Helvetica;">Tutorial PDFs & Videos.</span><br><span style="font-family: 'proxima_nova_rgregular', Helvetica; font-weight: normal;"><span style="color: rgb(39, 44, 45); font-size: 14px;">Not only will we hold your hand if you're a new Mac user, but we've also provided you with some premium award winning video and reading material for swapping from Windows to Mac and for new Mac users, including <span class="tiptext">OS X Yosemite The Missing Manual,</span> <span class="tiptext">Switching to Mac The Missing Manual</span>& <span class="tiptext">OS X Yosemite for Dummies</span>in order to help make the transition from Windows to Mac easy and enjoyable.</span></span><!--[if !mso]><!--></p><!--<![endif]-->
                                                </td>
                                                </tr>
                                            </table>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="100%" height="30"></td>
                                    </tr>
                                </table>

                            </td>
                        </tr>
                    </table><!-- End Wrapper 2 -->

                </td>
            </tr>

大多数答案涉及使用 display:inline-block 和 float:left 来达到预期的结果，但正如您所看到的，两者都在我的 CSS 之内，所以可能与table等

Answer 1

只删除 float:left 和 display:inline-block 它不能一起工作并且跨度元素默认是内联的

Answer 2

首先，您不应该在同一个元素上使用 float 和 display:inline-block。在您的情况下，您将整个 "span" 设为 FIXED 宽度容器内的 inline-block 元素。所以基本上，由于元素没有足够的空间并排放置，元素（包含文本句子）会跳到另一边。留下一些文字永远不会理解...

但是为了使您的代码正常工作.. 只需同时删除 float 和 display:inline-block 跨度将按其应有的方式运行...作为 inline 元素（这正是你需要什么）

.tiptext {
width: auto;
font-family: 'proxima_nova_rgbold', Helvetica; 
text-decoration: underline;
color: rgb(39, 44, 45); 
font-size: 14px;
cursor: help; 
}

JSFIDDLE

将 <span> 个元素放在同一行文本中

Put <span> elements on same line of text

html

css

html-table

inline