为什么此“下一个”箭头呈现为略低于“上一个”箭头的高度？

Question

我主要的问题是CSS问题。 我有一个使用CLNDR.js的html模板驱动的日历，并且“下个月”箭头低于“上个月”，无论我做什么，我都无法通过CSS来解决此问题。

这是我的小提琴： http : //jsfiddle.net/y072a94e/

我相信 css的相关部分是

#full-clndr .clndr-controls .clndr-previous-button {
  float: left;
  text-align: left;
}

#full-clndr .clndr-controls .clndr-next-button {
  float: right;
  text-align: right;  
}

但是对我来说，这就是我要这样做的方法，但是它不起作用，因此它必须是其他方法吗？

如果有人对CLNDR.js有丰富的经验，那么就样式而言，整个过程似乎完全是歪斜的。 这是必须通过CSS处理的吗？ 还是我在clndr的配置中缺少什么？

Answer 1

您可以通过更改元素的顺序来解决此问题

更改：

<div class="clndr-previous-button">&lsaquo;</div>
<div class="month"><%= month %></div>
<div class="clndr-next-button">&rsaquo;</div>

至：

<div class="clndr-next-button">&rsaquo;</div>
<div class="clndr-previous-button">&lsaquo;</div>
<div class="month"><%= month %></div>

浮动元素的顺序很重要。 通过首先具有浮动元素，您可以使随后的内容浮动并占据它们之间的空间。

jsFiddle示例

Answer 2

月份名称填充了可用宽度，并将其推到下一行。 最简单的解决方案是将HTML中月份名称之前的“下一个”箭头移动：

    <div class="clndr-controls">
      <div class="clndr-previous-button">&lsaquo;</div>
      <div class="clndr-next-button">&rsaquo;</div>
      <div class="month"><%= month %></div>
    </div>

---

如果不是这样，您可以改为将.month元素更改为inline-block这样它就不会占用整个宽度：

#full-clndr .clndr-controls .month {
    display: inline-block;
}