Question

我想问你，如果你知道，我怎么能做到（我应该设置哪个属性）来使该日历中的“测试”事件（其中一个是红色，另一个是绿色）（不是每个在每一行）。最多会有4个事件（每个事件的宽度为25％）。谈到这些要素：

<a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title="">

我正在我们的网站上处理这个问题，基于Joomla，我已经上传了这个dpcalendar组件 - http://www.drnky.cz。

我尝试应用float：left，display：inline，改变了宽度，但没有任何帮助。你知道问题出在哪里吗？ :)非常感谢。

http://jsfiddle.net/2th7x9ng/

Answer 1

您的问题是元素使用属性position: absolute，float对此没有影响。

您只需将第二个元素的left和top设置更改为以下内容，它们就会对齐：

position: absolute;
left: 103px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);

Answer 2

使用position: absolute时，您需要自己控制并设置样式。 float无法与position: absolute一起使用。因此，您需要更改left和top，以便在日历中的任何位置放置green和red项目符号超链接。

只需在您网站的日历中使用以下样式作为锚标记即可。我在你的网站上测试了它，它通过显示在同一行中来解决你的问题。

绿色链接：

position: absolute;
left: 93px;
border-color: rgb(18, 163, 18);
width: 23px;
top: 146px;
background-color: rgb(18, 163, 18);

红色链接：

position: absolute;
left: 102px;
border-color: rgb(204, 0, 0);
width: 23px;
top: 146px;
background-color: rgb(204, 0, 0);

编辑2：

<a href="/component/dpcalendar/event/1" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="float: left;position: absolute; left: 93px; border-color: rgb(18, 163, 18); width: 23px; top: 146px; background-color: rgb(18, 163, 18);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>
<a href="/component/dpcalendar/event/2" class="fc-event fc-event-hori fc-event-start fc-event-end dpcal-module_event_dpcal_198" style="position: absolute; left: 102px; border-color: rgb(204, 0, 0); width: 23px; top: 146px; background-color: rgb(204, 0, 0);" data-original-title="" title=""><div class="fc-event-inner"><span class="fc-event-title">&nbsp;</span></div></a>

工作Fiddle here.

<a> inline not working</a>

2 个答案:

编辑2：