Question

让我们看一下 DEMO 。这是一个日历，我可以从左向右移动。此日历正在移动::before三角形。这不是好行为，我想在没有三角形的情况下移动它。有可能吗？最好没有js。

$('[type="range"]').on('input change', () => {
  $('.calendar').css('left', $('[type="range"]').val() + 'px');
})

.calendar {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 200px;
  border: 1px solid #ccc;
  padding: 20px;
}

.calendar:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 200px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #ccc transparent;
}

.day {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendar">
  <div class="day">1</div>
  <div class="day">2</div>
  <div class="day">3</div>
  <div class="day">4</div>
  <div class="day">5</div>
  <div class="day">6</div>
  <div class="day">7</div>
  <div class="day">8</div>
  <div class="day">9</div>
  <div class="day">10</div>
</div>

<input type="range", min="50", max="200", value="70">

Answer 1

我已经对您的代码进行了一些更改，似乎有效：）。

CSS：

.ct {
  position: absolute;
  top: 70px;
  left: 70px;
  width: 200px;
}
.calendar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #ccc;
  padding: 20px;
}
.ct:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 200px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 10px 5px;
  border-color: transparent transparent #ccc transparent;
}

.day {
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 30px;
  margin: 5px;
}

HTML：

    <body>
  <div class="ct">
    <div class="calendar">
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day">4</div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
    </div>
  </div>

  <input type="range", min="50", max="200", value="70">
</body>

基本上，我已经添加了具有伪选择器（箭头）的父容器，而这个容器没有移动。移动部分仅为.calendar。

Answer 2

更新css

 .calendar:before {
      display:none;
    }

添加此箭头将隐藏。或者在课前删除.calendar：

不使用伪元素之前移动html块

2 个答案: