1

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

我有以下 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>

根据萤火虫有以下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 adddisplay:block;` 但这不起作用。我怎样才能让它们排列而不是叠加？

更新：

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

在此处输入图像描述

更新 2：

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

4

1 回答 1

1

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

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

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

更新

啊，好的，所以负的上边距导致了这个问题。为了让你的文本和你的图标在同一行上对齐，你必须用 span 包裹文本并应用 a 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 类中。

于 2013-04-11T21:31:10.093 回答