Question

导航按钮位于图像标题div的顶部。两者都悬停下来。当转到下一个图像时，导航按钮位于正确的位置，但是当您单击上一个时，整个导航屏幕将移至右下角！

  nav {
         position: absolute;
  width: 100%
  height: 20px;
  padding-bottom: 2px;
  z-index: 1;
  float: right;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  background: black;
  opacity: 0.4;
  right: 1px;

}
.title {
  position: absolute;
  width: 85%;
  height: 20px;
  padding-bottom: 2px;
  margin-top: -25px;
  transition: margin-top 200ms ease-in;
  background: black;
  color: white;
  opacity: 0.6;
}

.title-text {
  float: left;
  padding-left: 5px;
}

.slides:hover .title {
   margin-top: 0px;
}

这是link小提琴。

Answer 1

我修复了这部分，但代码本身很笨拙

无论如何仍然是示例：jsfiddle

首先你忘了＆＃34;;＆＃34;在.nav {和height之间width 其次，不要使用position: absolute和float它们相互排斥尝试连接类似按钮的类似classes

.btn-prev,
.btn-next{
  color: black;
  background:white;
  border: 2px solid white;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
  display: inline-block;
}

快速解释一下，我在text-align元素上设置.nav，因此按钮将设置在.nav内的右侧，.btn-*设置为display: inline-block;（默认 display: block;所以它的行为与文字类似。

CSS Nav按钮向左下方移动

1 个答案: