HTML格式，只是不想工作

Question

简单的html格式，我似乎无法正确使用。

我有以下div：

<div class="fc-event-time" data-hasqtip="true" aria-describedby="qtip-6">
      2:54 - 6:54
    <i class="icos-refresh" style="float: right; margin-top: -17px; margin-right: 2px"></i>
    <i class="icos-acces-denied-sign" style="float: right; margin-top: -17px; margin-right: 2px"></i>
</div>

根据firebug，有以下css类作用于它：

padding-left: 5px;
white-space: nowrap;
font-weight: 500;font-size: 12px !important;
padding: 0px 1px;
color: rgb(0, 0, 0) !important;
cursor: pointer;
direction: ltr;
text-align: left
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 18px;

现在上面的代码呈现如下：

如果你能看到，有两个图标在彼此的顶部，the <i></i> elements', my problem is that I would like to have it side by side. My first thought was to add显示：阻止;`但这不起作用。我怎么能把它们排成一行而不是叠加？

更新：

取出margin-top: -17px;后，我得到以下结果，但我需要它们（文字和图标）在同一行。

更新2：

最后找出问题并解决了这个问题，结果证明是2:54 - 6:54纯文本不允许<i> s进入同一行。我所做的只是修改完整日历源以将时间放在<span>内并给它一个样式属性`float：left'，它现在排成一行并正常工作。谢谢大家的帮助，如果提交了一个更好的答案（我不需要修改javascript，我仍然会将其作为答案奖励，因为这将是一个更好的方法。

Answer 1

据我所知，你的i图标没有任何宽度，加上负边距顶部可能会与浮动玩耍。如果您为i元素定义实际宽度，则不应该有问题（至少基于我能看到的内容）。

如果这不起作用，您可能还会涉及某种绝对定位。如果是这种情况，并且已应用于i元素，那么您需要将其删除。

但是没有看到应用于i元素的样式，就有点不可能了。

更新

啊，好吧所以负面的上边距导致了这个问题。为了使您的文字和图标在同一行上对齐，您必须使用跨度包装文本并对其应用float:left。

<span style="display: block; float:left;">2:54 - 6:54</span>
<i class="icos-refresh" style="float: right; margin-right: 2px"></i>
<i class="icos-acces-denied-sign" style="float: right; margin-right: 2px"></i>

但是我建议你不要使用内联样式并将它们提取到特定的css类。