Question

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

我正在修改一个邮件列表模板，用于在eBay上使用的产品列表 - 因此它的表格单元格不完整，但在某种程度上有效，但似乎导致了问题。

我有一个带有一些javascript的标签系统，可以在鼠标悬停时显示弹出信息，这样可以正常工作，但是当我希望所有内容都是内联时，用于对齐span文本的CSS会为每个span元素创建一个新行。 / p>

正如您在图像中看到的，每个粗体元素都会开始换行。我已经删除了嵌套在其中的弹出式span类来排除它，但它们仍然没有排列在一起，这里是span标记的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; 
}

这里是span元素所在的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中，所以也许它与表格等有关。

Answer 1

仅删除它不能协同工作的float:left和display:inline-block，并且span元素在默认情况下是内联的

Answer 2

首先，你不要在同一个元素上使用float和display:inline-block。在你的情况下，你做了整个＆＃34; span＆＃34; 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>元素放在同一行文本中

2 个答案: