Question

我的主要问题和问题主要是CSS问题。我有一个html模板驱动的日历使用CLNDR.js和＆＃34;下个月＆＃34;箭头低于＆＃34;上个月＆＃34;，无论我做什么，我都无法通过CSS解决这个问题。

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 example

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;
}

为什么这个“下一个”箭头略微低于“上一个”箭头的高度？

2 个答案: