不想工作的HTML格式

Question

简单的html格式，我只是似乎不能正确的。

我有以下部门：

<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显示:block；但是这不起作用。我怎么能让他们排队而不是叠加呢？

更新：

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

​

​

更新2:

最后，解决了这个问题并解决了这个问题，原来是2:54 - 6:54纯文本，它不允许<i>进入同一行。我所做的就是修改完整的Calendar源代码，将时间放置在一个<span>中，并给它一个样式属性‘`float: left’，它现在就开始排列和工作了。感谢大家的帮助，如果提交了一个更好的答案(我不需要修改javascript，我仍然会把它作为一个答案，因为这将是一个更好的方法。

Answer 1

据我所知，你没有任何宽度应用到你的i图标，加上负的边距-顶部可能在玩哈克浮标。如果您为您的i元素定义了实际宽度，您就不会有问题(至少根据我看到的内容)。

如果这不起作用，你也可能会有某种绝对的定位。如果是这样的话，并且应用于i元素，那么您就需要删除它。

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

更新

啊，好吧，所以负的最高利润导致了这个问题。为了使文本和图标对齐到同一行，您必须用span包装文本，并将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类中。